使用薩米設置淘汰賽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路由

回答

相關問題