라우팅을 위해 sammy를 사용하여 녹아웃 관측 가능 설정하기

Question

데이터 바인딩을위한 녹아웃 JS와 라우팅을위한 sammy를 사용하는 SPA가 있습니다. 동적 라우팅이 필요한 카드를 가지고 있습니다. 내 문제는 내가 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> 

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

'test'라는 이름이지만 바인딩 <input type="text" class="form-control" placeholder="Untitled Deck..." data-bind="value: $root.deck.name" />은 'c'라는 문자를 바인딩하는 것으로 보입니다.

나는 실망했습니다. 도와주세요.

은 내가 jsfiddle to demonstrate 내 문제

Answer 1

코드에서 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());    
    }); 
}); 

Answer 2

에게 내가 전에 이런 짓을 뷰 모델에서 내 새미() 경로를 정의하는 한 방법을 만들기 위해 노력했다. 간략을위한 짧은 예 :

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

그런 식으로 자신을 통해 관찰 가능 항목 등에 액세스 할 수 있습니다.