Question

我的代码看起来像这样：

（此视图在视图模型外声明。）

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>

正如我所提到的，这很有效，模板正确地显示了源中列出的图像。

但是，我没有在数组中添加匿名类型，而是添加了一个名为“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来证明我在做什么。单击“新游戏”时，您可以看到旧代码有效但不是新版本。

Answer 1

正如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”

你也不需要那里的$ data，所以我从下面的小提琴中删除了它。

修复是要么将调度设置更改为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') }

Knockout JS模板没有在可观察数组中显示对象属性？

1 个答案: