使用Knockout.js创建Bootstrap选项卡foreach

我试图创建一些选项卡，每个用户选择一个配置文件保存一个选项卡。每个配置文件是一个ViewModel。所以我想我只是创建另一个ViewModel，其中包含一个类型为{name：profile_name，model：model_converted_to_json}的对象的observableArray。使用Knockout.js创建Bootstrap选项卡foreach

我跟着this example来创建我的代码 - 但我没有得到任何约束，出于某种原因。

这里是我的代码：
-ViewModel（我用Requirejs，这解释了外部包装）：

"use strict"; 
// profiles viewmodel class 
define(["knockout"], function(ko) { 
    return function() { 
     var self = this; 
     this.profilesArray = ko.observableArray(); 
     this.selected = ko.observable(); 
     this.addProfile = function(profile) { 
      var found = -1; 
      for(var i = 0; i < self.profilesArray().length; i++) { 
       if(self.profilesArray()[i].name == profile.name) { 
        self.profilesArray()[i].model = profile.model; 
        found = i; 
       } 
      } 
      if(found == -1) { 
       self.profilesArray().push(profile); 
      } 
     }; 
    }; 
});

-The JS代码（大文件的摘录）：

var profiles = new profilesViewMode(); 
ko.applyBindings(profiles, $("#profileTabs")[0]); 
$("#keepProfile").on("click", function() { 
    var profile = { 
     name: $("#firstName").text(), 
     model: ko.toJSON(model) 
    }; 
    profiles.addProfile(profile); 
    profiles.selected(profile); 
    console.log(profile); 
    $("#profileTabs").show(); 
});

- HTML（感谢Sara纠正我的HTML标记）

<section id="profileTabs"> 
    <div> 
     <ul class="nav nav-tabs" data-bind="foreach: profilesArray"> 
      <li data-bind="css: { active: $root.selected() === $data }"> 
       <a href="#" data-bind="{ text: name, click: $root.selected }"></a> 
      </li> 
     </ul> 
    </div> 
</section>

我已验证observableArray在按钮单击时确实获得了新的正确值 - 它只是不会呈现。我希望这是我在Knockout数据绑定语法中缺少的一件小事。

谢谢你的时间！

来源

2012-11-07 Traveling Tech Guy

这可能会帮助您的HTML问题http://meta.stackexchange.com/questions/110126/how-can-i-paste-html-markup-into-a-stack-overflow-question-field – jes

这就是我尝试过（并且只是重新尝试过 - 多次） - 仍然，HTML代码不显示 –

您的已排序列表正在干扰代码格式。 – Sara

您将希望直接在observableArray上调用push，它将同时推送到底层数组并通知任何订户。所以：

self.profilesArray.push(profile);

来源

2012-11-07 20:32:33

是的，就是这样！谢谢！ –

您正在设置名称使用name: $('#firstName').text();如果这是引用输入字段（我在这里假设），则可能需要将其更改为.val()。

您绕过KO的用户（在这种情况下，结合）

这里是a working jsfiddle根据您的代码基础阵列上使用.push()。我采取了一些自由model，因为这不包括在内。

来源

2012-11-07 20:43:06 Kato

感谢@ kato的努力（我爱jsfiddle）。推（）是答案，但有人打你:)。至于.text（） - 该值实际上来自页面上的，而不是字段。 –

我的荣幸！（我有时想知道@RPNiemeyer是否是一台超级计算机，保存在一个特殊的地下设施中，以便在我做之前回答问题，然后我记得他不会真的需要这么做） – Kato

是的，他真的是一个超级电脑。 –

使用Knockout.js创建Bootstrap选项卡foreach

回答

相关问题