knockoutjs 变量引用方式、怪异问题排查

问题:使用knockoutjs的过程中,有时候会发现一些奇怪的现象:譬如字段值改了后,相关引用的地方不起作用!即相关画面效果没有跟着动态变化。

排查:

  • 从javascript控制台中查看是否有脚本错误,脚本错误可能会导致knockoutjs后续脚本不执行
  • 在表达式中引用变量值时,必须以方法调用的方式来引用,不能直接使用变量名的方式来引用,不然可能导致上述问题!!!总结:可以直接使用变量名引用值的地方都可以使用方法调用的方式来引用值,反之不行!
  • 移除无关控件,看是否是其他控件中的一些错误用法导致的
  • javascript中alert相关变量的值

例子:

// knockoutjs 正确用法,单个判断条件或者变量绑定(非表达式)时,即可以直接使用变量名来引用变量值、也可以使用方法调用的方式来引用变量值
<div data-bind="visible:!booleanVar()">content</div>
<div data-bind="visible:booleanVar">content</div>
<input type="text" data-bind="value:valueVar,css:{disabled:cssVar}" />

// 正确用法,多个判断条件(表达式中引用变量值)时,必须使用方法调用的方式来引用变量值
<div data-bind="visible:(booleanVar() && booleanVar())">content</div>

// 错误用法,多个判断条件(表达式中引用变量值)时,直接使用变量名来引用变量值的地方,都会[color=red]导致knockoutjs自动更新失效!!![/color]
<div data-bind="visible:booleanVar && booleanVar">content</div>
<div data-bind="visible:booleanVar() && booleanVar">content</div>

相关推荐