Javascript 使用sammy为路由设置可观测的淘汰

我有一个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>

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

最后，在我的布线中，我尝试创建一个新的甲板，如下所示：

 <!-- 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>

// 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”的测试组，但是绑定似乎绑定了字母“c”

我不知所措，请帮忙

---

我试图解决我的问题，我以前的做法是在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访问您的可观察对象等。

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

---

var元素=$（'#createDeck'）[0]；应该是var元素=$（“#createDeck”）；由于id选择器不返回数组。感谢您的输入。结果是一个语法错误。很高兴你找到了答案。