Question

我的KnockoutJS应用程序中有一个问题，我似乎无法弄明白。基本上，我已经将列表绑定到'ko.computed'方法，该方法允许我从主列表中过滤项目。我将此列表用于我的主显示给用户。在我的模板中的每个项目上，我有一个或多个按钮需要呈现为JqueryUI按钮。一旦计算出触发更改，我似乎无法找到在模型中正确重绘按钮的方法。

这是一个非常（非常）简单的模拟视图模型示例：

function List(items) { 
  var self = this;
  self.allItems = ko.observableArray(items || []);
  self.search = ko.observable('');
  self.filtered = ko.computed(function(){
    var search = self.search();
    return ko.utils.arrayFilter(self.allItems(), function(item){
      return item == search;
    });
  });
}

我的观点可能如下：

Search: <input type='text' data-bind='value: search' />
<ul data-bind='foreach: filtered'>
  <li>
    <span data-bind='text: $data'> </span>
    <button>NOTICE</button>
  </li>
</ul>

这是我初始化显示的方式：

$(function(){
  var vm = new List(['a', 'b', 'c', 'd', 'e', 'f', 'g']);
  ko.applyBindings(vm);
  $('button').button(); // <-- notice!
});

请注意，一切正常！当页面首次显示时，我会看到漂亮的JqueryUI按钮...但是，只要我在搜索框中输入 a ，按钮就会完全丢失它的样式。我需要找到一种方法再次拨打$('button').button()。

Knockout.js中是否有事件或回调，我可以在触发计算方法后调用设置我的ui按钮？

提前致谢！

Answer 1

样式重置的原因是因为按钮之前绑定的dom元素已被破坏。

您可以通过创建一个简单的自定义绑定（未经测试）来解决此问题

ko.bindingHandlers.uibutton = {
    init: function(element, valueAccessor) {
        var $element = $(element), config = valueAccessor();
        $element.button();
    }
}

这可以通过此添加添加到您的模板

<button data-bind="uibutton: {}">NOTICE</button>

您可以删除对$（'button'）。button（）;

的调用

当使用KO时，我们几乎完全没有标准的Jquery表达式，通常自定义绑定允许我们执行相同的操作，但可能会有更高级的内容，例如对可观察对象做出反应等。

希望这有帮助

在淘汰计算方法刷新我的视图后，如何处理样式？

1 个答案: