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>

如何在单击时修改对象

1 个答案: