Question

我有一个SPA使用knockout JS进行数据绑定，使用sammy进行路由。我有一副卡片，我试图动态路由到。我的问题是，当我尝试从sammy中的路由功能设置一个knockout observable时它不起作用。

我的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

之前我这样做的方法是在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);

这样你就可以通过自己访问你的观察者等。

Answer 2

在您的代码中，除非您使用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());            
    });
});

使用sammy为路由设置knockout observable

2 个答案: