使用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

回答

相關問題