Question

I’m trying to modify an object on a click. Here’s what I have.

<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);

Basically when the user clicks the tab I need it to update the model(and eventually the database) that it is the currently active tab. The first way I had was the delete the object modify it and then push it back to the array, but pushing adds it to the end of the array, which I don’t want. Thanks for any help.

Answer 1

Typically, you would mantain something like a “selectedTab” or “activeTab” observable.

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

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

Then, you can do any binding that you want against activeTab. In KO 1.3, you could do:

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

Prior to that you could do:

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