Knockout Js渲染與基於Json值的數據綁定不同

我有一個類似於下面的代碼，我想呈現不同的城市名稱巴恩斯利和不同的城市與其他一些名稱資本。如果綁定，那麼做的正確方法是什麼？我是否必須將cityName設置爲可觀察才能正常工作？Knockout Js渲染與基於Json值的數據綁定不同

<ul data-bind="foreach: planets"> <li> Planet: <b data-bind="text: name"> </b> <div data-bind="if: capital"> Capital: <b data-bind="text: capital.cityName"> </b> </div> </li> </ul> <script> ko.applyBindings({ planets: [ { name: 'Mercury', capital: null }, { name: 'Earth', capital: { cityName: 'Barnsley' } } ] }); </script>

好還是沒有成功，我的JSON是這樣的：

var Images = { "ImageInfo": [ { "thumbs": [ { "IMAGE": "url(http://...d38508d4f183.jpg)", "type": "img" }, { "IMAGE": "url(http://...d38508d4f183.jpg)", "type": "video" } ] }, { "thumbs": [ { "IMAGE": "url(http://...d38508d4f183.jpg)", "type": "img" }, { "IMAGE": "url(http://...d38508d4f183.jpg)", "type": "video" } ] } ] };

我想要實現的HTML是如下：

<div id="Images"> <div data-bind="foreach: ViewModelB"> <div data-bind="foreach: thumbs"> <div data-bind="if: type == 'img'"> <a style="width: 50px; height: 50px; float: left; display: block; background-size: cover; margin-left: 15px; cursor: pointer;" data-bind="style: { backgroundImage: IMAGE_PATH }"></a> </div> <div data-bind="if: type == 'video'"> <p style="width: 50px; height: 50px; float: left; display: block; background-size: cover; margin-left: 15px; cursor: pointer;" data-bind="style: { backgroundImage: IMAGE_PATH }"></p> </div> </div> </div> </div> <script> var ViewModelB = ko.mapping.fromJS(Images); ko.applyBindings(ViewModelB, document.getElementById("Images")); </script>

任何幫助將非常感激！

來源

2013-10-07 Ricky Stam

您的代碼有效：http://jsfiddle.net/Rpgnc/ –

我知道上面的代碼是從Knockoutjs文檔複製粘貼的。我的問題是如何使城市名稱巴恩斯利與不同的首都城市名稱：asdad不同。有沒有辦法寫數據綁定：「如果城市名稱==巴恩斯利」呈現以下... –

你就要成功了，它沒有可觀察到如果不打算稍後的變化，如果報表和渲染不同，你可以做，像下面

<ul data-bind="foreach: planets"> 
    <li> 
     Planet: <b data-bind="text: name"> </b> 
     <div data-bind="if: capital"> 
       <!-- ko if:capital.cityName=='Barnsley' --> 
      Capital: <b data-bind="text: capital.cityName"> </b> 
       <!-- /ko --> 
      <!-- ko if:capital.cityName=='asdad' --> 
      Capital: <i data-bind="text: capital.cityName"> </b> 
       <!-- /ko --> 
     </div> 
    </li> 
</ul>

或者你也可以做開關的情況下https://github.com/mbest/knockout-switch-case

來源

2013-10-07 16:54:32

我現在不在辦公室，明天早上我會嘗試這兩個建議，我會提供反饋。謝謝你的時間！ –

仍然沒有運氣，我編輯我的問題，請參閱上面 –

我試着敲你的建議，並且它的工作像一個魅力，但我仍然想知道我的代碼中的錯誤在哪裏：/ –

不，它不一定是可觀察的（只要它不會被改變;如果它改變了，改變不會自動反映在視圖中），並且你得到了提議的約束對：應該是data-bind="if: cityName=='Barnsley'"（注意冒號和引號）。

來源

2013-10-07 16:57:37 ebohlman

Knockout Js渲染與基於Json值的數據綁定不同

回答

相關問題