Настройка нокаута, наблюдаемого с использованием sammy для маршрутизации

Question

У меня есть SPA, использующий нокаут JS для привязки данных и sammy для маршрутизации. У меня есть колода карт, к которой я пытаюсь выполнить динамическую маршрутизацию. Моя проблема в том, что она не работает, когда я пытаюсь установить нокаут, наблюдаемый из функции маршрутизации в sammy.

Мой HTML, где я пытаюсь связать имя колоды, выглядит следующим образом:

<!-- Create Deck --> 
<div id="createDeck" class="page" style="display:none;"> 
    <input type="text" class="form-control" placeholder="Untitled Deck..." data-bind="value: $root.deck.name" /> 
</div> 

<script type="text/javascript" src="lib/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="lib/knockout-2.3.0.js"></script> 
<script type="text/javascript" src="lib/bootstrap.min.js"></script> 
<script type="text/javascript" src="lib/sammy.js"></script> 
<script type="text/javascript" src="js/Models/Deck.js"></script> 
<script type="text/javascript" src="js/Models/Card.js"></script> 
<script type="text/javascript" src="js/ViewModels/DeckViewModel.js"></script> 
<script type="text/javascript" src="js/ViewModels/CardViewModel.js"></script> 
<script type="text/javascript" src="js/routing.js"></script> 

Deck.js и DeckViewModel.js выглядит ниже

function Deck(deckid, name, cards) { 
    var self = this; 

    self.id = deckid; 
    self.name = name; 
    self.cards = cards; 
} 

function DeckViewModel(deck, cards) { 
    var self = this; 

    self.deck = ko.observable(deck); 
    self.cards = ko.observableArray(cards); 

    self.goToCard = function (card) { location.hash = card.deckid + '/' + card.id }; 

} 

// Bind 
var element = $('#createDeck')[0]; 
var deckView = new DeckViewModel(null, null); 
ko.applyBindings(deckView, element); 

Наконец, в мои маршрутизации я пытаюсь создать новую колоду, как это:

// Client-side routes  
(function ($) { 

var app = $.sammy('#content', function() { 

    this.get('#deck/:id', function (context) { 
     showPage("createDeck", ": Create Deck"); 
     console.log(this.params.id); 
     deckView.deck = new Deck(1, "test", null); 
     console.log(deckView.deck);    
    }); 
}); 

$(function() { 
    app.run('#/'); 
}); 

})(jQuery); 

function showPage(pageID, subHeader) { 
    // Hide all pages 
    $(".page").hide(); 

    // Show the given page 
    $("#" + pageID).show(); 

    // change the sub header 
    $("#subHeader").text(subHeader); 
} 

Как вы можете видеть, я пытаюсь создать тест палубу с имя 'test', но привязка <input type="text" class="form-control" placeholder="Untitled Deck..." data-bind="value: $root.deck.name" />, похоже, связывает букву 'c'.

Я в затруднении, пожалуйста, помогите.

Я попытался сделать jsfiddle to demonstrate мою проблему

Answer 1

В вашем коде присвоение значений неверно, если вы не используете плагин Knockout-es5. здесь приведен правильный код

var app = $.sammy('#content', function() { 

    this.get('#deck/:id', function (context) { 
     showPage("createDeck", ": Create Deck"); 
     console.log(this.params.id); 
     deckView.deck(new Deck(1, "test", null)); 
     console.log(deckView.deck());    
    }); 
}); 

Answer 2

так, как я делал это прежде, чем определить мои Сэмми() маршруты в ViewModel. Короткий пример для краткости:

(function($) { 
    function ViewModel() { 
     var self = this; 

     self.deckId = ko.observable(null); 

     Sammy(function() { 
      this.get('#/deck/:deckId', function(context) { 
       self.deckId(this.params.deckId); 
      }); 
     }); 
    } 

    $(function() { 
     ko.applyBindings(new ViewModel()); 
    }); 
})(jQuery); 

Таким образом, вы можете получить доступ к своим наблюдаемым и т. Д. Через себя.