使用sammy设置可观察的淘汰赛路由 [英] Setting a knockout observable using sammy for routing

问题描述

我有一个SPA，它使用剔除JS进行数据绑定，并使用sammy进行路由.我有一副纸牌，我正在尝试将其动态路由到.我的问题是，当我尝试通过sammy中的路由功能设置可观察到的基因剔除时，它不起作用.

I have a SPA using knockout JS for data binding and sammy for routing. I have a deck of cards that I am trying to have a dynamic routing to. My problem is that it doesn't work when I try to set a knockout observable from the routing function in sammy.

我试图绑定卡座名称的HTML看起来像这样:

My HTML, where I try to bind the name of the deck, looks like this:

 <!-- 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如下所示

The Deck.js and DeckViewModel.js looks like below

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，如下所示:

Finally, in my routing I try to create a new Deck, like this:

// 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".

As you can see, I'm trying to create a test deck with the name 'test', but the binding <input type="text" class="form-control" placeholder="Untitled Deck..." data-bind="value: $root.deck.name" /> seems to bind the letter 'c'.

我很茫然，请帮助.

我试图制作一个 jsfiddle来演示我的问题

推荐答案

在您的代码中，除非您使用的是Knockout-es5插件，否则值的分配是不正确的.这是正确的代码

In your code the value assignment is not correct unless you are using Knockout-es5 plugin. here is the correct code

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

这篇关于使用sammy设置可观察的淘汰赛路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！