數據從knockoutjs綁定信息視圖頁面 - 不顯示

信息在我的JavaScript文件，我有淘汰賽和jQuery其中包含了兩個不同的視圖模式，我無法顯示結果的組合：數據從knockoutjs綁定信息視圖頁面 - 不顯示

的Javascript：

位置視圖模型

var positionViewModel = function (data) { 
     var _self = this; 
     _self.PositionName = ko.observable(data.PositionName); 
     _self.PositionRank = ko.observable(data.PositionRank); 
     _self.ContentRole = ko.observable(data.ContentRole); 
    } 

    positionViewModel.AddPositions = function (data) { 
     $.each(data, function (index, value) { 
      positionViewModel.PushPosition(value); 
     }); 
    }; 

    positionViewModel.PushPosition = function (postion) { 
     viewModel.PositionTypes.push(new positionViewModel(position)); 
    };

用戶視圖模型

個

// the ViewModel for a single User 
    var userViewModel = function (data) { 
     var _self = this; 
     _self.ID = ko.observable(data.ID); 
     _self.Name = ko.observable(data.Name); 
     _self.Email = ko.observable(data.Email); 
     _self.ContentRole = ko.observable(data.ContentRole); 
    }; 

    userViewModel.AddUsers = function (data) { 
     $.each(data, function (index, value) { 
      userViewModel.PushUser(value); 
     }); 
    }; 


    userViewModel.PushUser = function (user) { 
     viewModel.Users.push(new userViewModel(user)); 
    };

位置和用戶

ko.utils.arrayForEach(viewModel.PositionTypes(), function(position){  
    var usersInPosition = ko.utils.arrayFilter(viewModel.Users(), function(user){ 
      return user.ContentRole() == position.ContentRole(); 
    }); 
    ko.utils.arrayForEach(usersInPosition, function(user){   

    }); 
});

綁定

// Binds the main ViewModel 
var bindModel = function (data) { 
    var _self = viewModel; 

    viewModel.TotalUser = ko.computed(function() { 
     return _self.Users().length; 
    }); 

    userViewModel.AddUsers(data); 
    ko.applyBindings(viewModel, $('#UserView')[0]); 
};

查看頁面

<ul data-bind="foreach:PositionTypes"> 
      <li> 
       <div> 
        <span data-bind="text:PositionName"></span> 
       </div> 
       <ul data-bind="template: { name: 'grid', foreach: Users}"> 

       </ul> 
      </li> 
     </ul>

結果例子：

CEO
詹姆斯

副總裁
約翰

工人
艾米
貝特西

我怎樣才能改變我的觀點，以正確顯示從JavaScript文件的效果？

來源

2013-10-01 Masriyah

你是如何應用KO綁定？ – edhedges

你有什麼麻煩？什麼不起作用？ – nemesv

@edhedges我更新了我的帖子，上面顯示了我的綁定 - 謝謝 – Masriyah

所以你的架構是錯誤的開始。在您的示例中，您顯示的是Position類型的列表，每個Position都有另一個類型User的列表。我掀起了一個正確的架構小提琴，您可以添加任何您需要的功能。在開始編碼之前，我會認真研究knockout文檔並進行一些設計。

http://jsfiddle.net/zBmSN/1/

來源

2013-10-01 18:16:16 edhedges

謝謝 - 我感謝幫助。但我想知道，因爲我想創建一個像這樣的linq查詢將返回像每個位置的用戶可能：'linq.From（PositionTypes）.ForEach（用戶在用戶where PositionTypes.ContentRole == Users.ContentRole）選擇用戶' ？ – Masriyah

這似乎是一個不同的問題。在主視圖模型中創建一個實現此功能的函數。 – edhedges

數據從knockoutjs綁定信息視圖頁面 - 不顯示

回答

相關問題