使用 sammy 设置可观察到的淘汰赛进行路由

Question

我有一个使用淘汰赛 JS 进行数据绑定和 sammy 进行路由的 SPA。我有一副牌，我正试图对其进行动态路由。我的问题是，当我尝试从 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);

最后，在我的路由中，我尝试创建一个新的 Deck，如下所示：

// 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 中定义我的 Sammy() 路由。为简洁起见，更短的示例：

(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);

这样你就可以通过 self 访问你的 observables 等。