Нокаут JS-шаблон, не отображающий свойство объекта в наблюдаемом массиве?

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> 

Как я уже говорил, этот вопрос хорошо, и шаблон правильно показал изображение, указанное в источнике.

Однако вместо добавления анонимного типа в массив я добавил новую модель представления, называемую «карта». Это изменение в основном было сделано для поддержки других функций, связанных с картой, не имело смысла в первой модели представления. Карта выглядит следующим образом:

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> 

It потребовалось некоторое время, чтобы избавиться от очевидных ошибок JavaScript, но как только они были очищены, конечный результат просто ничего не отображал.

Когда я открыл инструмент отладки Chrome, отправился в Elements и нашел div id 'hand', вычисленный элемент просто показал литеральный шаблон - никаких замен с фактическим значением. В исходной рабочей версии он отображает шаблон, но также имеет правильное заполнение значений src и alt.

Если я удалю данные $ из шаблона, я получаю ошибки javascript.

Как получить привязку к работе сейчас, когда у меня есть эти объекты карты?

Я добавил this JS Fiddle, чтобы продемонстрировать, что я делаю. При нажатии кнопки «Новая игра» вы можете увидеть работу старого кода, но не более новую версию.

Answer 1

Как сказал Немесв, вам не нужно, чтобы JSON.strigify (JSON.parse (self.deck)).

Я просто удалил его со своей скрипки, и все это, похоже, работает нормально, но сращивание Невесе похоже на хорошее решение для копирования колоды в библиотеку (я думаю, что библиотека может быть перетасована, не теряя первоначальный порядок колоды или что-то?)

Еще одна проблема, с которой вы столкнулись в коде, была на самом деле потому, что вы только создали 5 карт в первой колоде, но для вашего свойства self.mulliganCount было установлено 7, поэтому, когда вы нарисовали руку, найти достаточное количество карт, чтобы добавить нулевой объект в свою колоду, которые затем не могли быть отображены, и поэтому вы получили

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

Сообщение: Не удается прочитать свойство 'imageUrl' of undefined

Вам также не нужны данные $, поэтому я удалил это из своей скрипки ниже.

Исправление было либо изменить Маллиган установку 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') }