Knockout JS模板不在可觀察數組中顯示對象屬性？

-1

我已經工作，看起來像這樣的代碼：（該變量視圖模型之外聲明）Knockout JS模板不在可觀察數組中顯示對象屬性？

var urlTemplate = "http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=XXX&type=card";

self.deck = [ 
    { id: 1, name: "Plains", mvId: 73963, imageUrl: urlTemplate.replace('XXX', '73963') }, 
    { id: 2, name: "Forest", mvId: 174928, imageUrl: urlTemplate.replace('XXX', '174928') } 
];

（（此數組視圖模型中定義。）這是模板）。

<div id="hand" data-bind="foreach: hand"> 
    <div class="cardInHand"> 
     <img height="150" data-bind="attr: { src: imageUrl, alt: name }" /> 
    </div> 
</div>

正如我所提到的，這個工作ked和模板正確顯示了源中列出的圖像。

但是，我沒有給數組添加一個匿名類型，而是添加了一個名爲「card」的新視圖模型。這種改變主要是爲了支持與卡片相關的其他功能在第一視圖模型中沒有意義。卡看起來是這樣的：

var card = function (id, name, multiverseId) { 

    self = this; 

    self.id = ko.observable(); 
    self.name = ko.observable(); 
    self.multiverseId = ko.observable(); 

    // other methods defined here ... 

    self.imageUrl = ko.computed(function() { 
     return imageUrlTemplate.replace('XXX', multiverseId); 
    }).extend({ notify: 'always' }); 

}

然後改變了數組的第一個視圖模型添加卡這樣的：

self.deck = [ 
     new card(3, "Plains", 269637), 
     new card(4, "Forest", 376343) 
    ];

最後的模板是這樣的：

<div id="hand" data-bind="foreach: hand"> 
    <div class="cardInHand"> 
     <img height="150" data-bind="attr: { src: $data.imageUrl, alt: $data.name }" /> 
    </div> 
</div>

它花了一段時間擺脫了明顯的JavaScript錯誤，但一旦他們被清除，最終結果根本沒有顯示任何東西。

當我打開Chrome的調試工具時，轉到Elements，發現div id'hand'計算的元素只是顯示了文字模板 - 沒有用實際值替代。在原始工作版本中，它顯示模板，但也有src和alt值正確填寫。

如果我從模板中刪除$ data，則會收到javascript錯誤。

現在我有這些卡片對象，我該如何讓綁定工作？我加了this JS Fiddle來證明我在做什麼。當點擊新遊戲時，你可以看到舊代碼工作，但不是新版本。

來源

2014-01-18 Sailing Judo

您的問題無關在這裏使用顯示的代碼，但是如何在「resetBoardState」方法中「克隆」你的卡片。因爲'JSON.strigify（JSON.parse（self.deck））'不會重新創建'卡'對象，所以您的可觀察屬性將會丟失。如果你不需要真正的深度克隆，你可以使用'self.deck.splice（0）'：http://jsfiddle.net/uKNQB/ – nemesv

正如Nemesv所說，你不需要那個JSON.strigify（JSON.parse（self.deck））。

我剛剛從你的小提琴中移除它，這一切似乎工作正常，但Nevesv的拼接看起來像一個很好的解決方案，將甲板複製到圖書館（我想這樣的圖書館可以洗牌，而不會失去原來的甲板訂單或什麼東西？）

你在代碼中遇到的另一個問題實際上是因爲你只在第一個卡組中創建了5張卡片，但是你的self.mulliganCount屬性設置爲7，所以當你畫一隻手時它不是找到足夠的卡，所以是添加一個零對象到你的套牌，然後無法呈現，所以你得到了

Uncaught TypeError: Unable to process binding "attr: function(){return { src:$data.imageUrl,alt:$data.name} }"

消息：無法讀取未定義的屬性'imageUrl'

您不需要那裏的$數據，所以我從下面的小提琴中刪除了它。

此修復程序是要麼改變穆里根設置爲5或者加2張新卡到第一臺....我加了2個新的卡：

Fiddle here

 { id: 10, name: "Hopeful Eidolon", multiverseId: 373616, imageUrl: imageUrlTemplate.replace('XXX', '373616') }, 
     { id: 10, name: "Skylasher", multiverseId: 369083, imageUrl: imageUrlTemplate.replace('XXX', '369083') }

來源

2014-01-18 11:37:00

我明白了。對不起的小提琴......當我把它放在那裏時，它已經很晚了，克隆問題是掩蓋了卡數問題。克隆在那裏的原因是因爲該套牌應該是不可變的，並且只能創建一次。圖書館可以多次更改內容和訂購。將這兩者分開似乎是一個好主意。 –

Knockout JS模板不在可觀察數組中顯示對象屬性？

回答

相關問題