如何通过单击修改对象

Question

我正在尝试通过单击修改对象。这就是我所拥有的。

<form>
    <ul class="tabs" data-tabs="tabs"  data-bind="template: 'lineTemplate'"></ul>

    <div class="pill-content" data-bind="template: 'lineDivTemplate'" ></div>
</form>

<script id="lineTemplate" type="text/html">
    {{each(i, line) lines()}}  
    <li><a data-bind="click: function() { viewModel.setActive(line) }, attr : { href : '#line' + id() }"><span style="font-size: 15px;" data-bind="text : model"/></a></li>
    {{/each}}
</script>


var viewModel = {       
    lines: ko.observableArray([]),
    setActive : function(line) {                
        **//I need to modify this object**

        line.activeTab = true;
    }
};

$.getJSON("/json/all/lines", { customer_id : customer_id } , function(data) {       

    ko.mapping.fromJS(data, null, viewModel.lines);     
}); 

ko.applyBindings(viewModel);

基本上，当用户单击该选项卡时，我需要它来更新模型（最终更新数据库），使其成为当前活动的选项卡。我的第一种方法是删除对象，修改它，然后将其推回数组，但是推送将其添加到数组的末尾，这是我不想要的。感谢您的任何帮助。

Answer 1

通常，您会维护诸如“selectedTab”或“activeTab”之类的可观察对象。

var viewModel = {
  lines: ko.observableArray([]),
  activeTab: ko.observable(),
};

viewModel.setActive = function(line) {
    this.activeTab(line);
}.bind(viewModel);

然后，您可以对 activeTab 进行任何您想要的绑定。在 KO 1.3 中，你可以这样做：

<div data-bind="with: activeTab">
  ...add some bindings here
</div>

在此之前你可以这样做：

<script id="activeTmpl">
   ...add your bindings here
</script>