使用萨米设置淘汰赛observable路由

我有一个SPA使用淘汰赛JS数据绑定和sammy路由。我有一套卡片，我正尝试进行动态路由。我的问题是，当我尝试从sammy中的路由选择功能设置一个淘汰赛观测值时，它不起作用。使用萨米设置淘汰赛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);

最后，我的路由我试图创建一个新的甲板，像这样：

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

正如你所看到的，我试图创建一个测试套牌名字'测试'，但绑定<input type="text" class="form-control" placeholder="Untitled Deck..." data-bind="value: $root.deck.name" />似乎绑定字母'c'。

我不知所措，请帮助。

我试图让一个jsfiddle to demonstrate我的问题

来源

2013-10-03 The Jonas Persson

var element = $（'＃createDeck'）[0];应该是var元素= $（'＃createDeck'）;因为id选择器不返回数组。 – Brandon

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

来源

2013-10-03 08:37:58

我以前做过这是视图模型中定义我的萨米（）路线的方式。简短的例子：

(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等。

来源

2013-10-03 01:50:57 Brandon

感谢您的意见。结果竟然是一个语法错误。 –

很高兴你明白了。 – Brandon

使用萨米设置淘汰赛observable路由

回答

相关问题