如何与knockout.js

添加和删除jQueryUI的标签我得到暗示从this sample codes 如何与knockout.js

附带这里

<button id='add'>add</button> 

<div data-bind="template: 'tabsTmpl'"></div> 
<script id="tabsTmpl" type="text/html"> 
    <div data-bind="jqTabs: { fx: { } }"> 
     <ul> 
      {{each tabs}} 
      <li> 
       <a href="#tab-${id}">${id}</a> 
      </li> 
      {{/each}} 
     </ul> 
     {{each tabs}} 
     <div id="tab-${id}" >${id}</div> 
     {{/each}} 
    </div> 
</script> 
<script> 
     ko.bindingHandlers.jqTabs = { 
      init: function (element, valueAccessor) { 
       var options = valueAccessor() || {}; 
       $(element).tabs(options); 
      } 
     }; 

     function TabItem(id) { 
      this.id = ko.observable(id); 
     } 

     var viewModel = { 
      tabs: ko.observableArray([new TabItem(1), new TabItem(2), new TabItem(3)]) 
     }; 


     $(function() { 
      ko.applyBindings(viewModel); 

      $('#add').click(function() { 
       viewModel.tabs.push(new TabItem(viewModel.tabs().length + 1)); 
      }); 
     }); 
    </script>

代码的使用jQuery的模板引擎上面的代码的作者，但我想用淘汰赛.js'本地模板引擎，所以我改变了html代码如下：

<div> 
    <div data-bind="jqTabs: { fx: { } }"> 
     <ul data-bind="foreach: tabs"> 
      <li> 
       <a data-bind="attr:{href:'#tab-' + id()}, text:id"></a> 
      </li> 
     </ul> 
     <!-- ko foreach: tabs --> 
     <div data-bind="attr:{id:'tab-'+id()}, text:id"></div> 
     <!-- /ko --> 
    </div> 
</div>

但是，它不起作用。我在做什么本地模板引擎错误？在此先感谢。

来源

2012-09-04 Ray

这是一个正常运作的版本：http://jsfiddle.net/NLGm8/32/

一个关于在jQuery淘汰赛整合最棘手的事情是当插件预计DOM元素在那里，当淘汰赛会，这使得它们的时机。

通常我会在插件初始化的时候发现一个setTimeout来实现这个功能，它在这里完成了。

来源

2012-09-04 10:37:33

谢谢约翰，你可以看看这段代码http://jsfiddle.net/outia24/NLGm8/33/我添加了按钮来添加标签，但它没有按预期工作 – Ray

问题是，自定义绑定不是重新评估。通过添加依赖关系，我们可以解决这个问题。然后我们需要确保在初始化选项卡之前清除任何现有选项卡。我也切换到自定义绑定中的'更新'（因为我们想对变化做出反应）。这是最后的结果：http://jsfiddle.net/NLGm8/34/ –

这是完美的，约翰。顺便说一句，你可以详细说明为什么'如果：标签（）。长度> 0'代码需要？我仍然不明白。 – Ray

如何与knockout.js

回答

相关问题