Настройка нокаута, наблюдаемого с использованием 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>

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, чтобы продемонстрировать свою проблему

Лучший ответ:

В вашем коде присвоение значений неверно, если вы не используете плагин 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());            
    });
}); 

Ответ №1

То, как я делал это раньше, — это определить мои маршруты Sammy() в ViewModel. Более короткий пример для краткости:

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

Таким образом, вы можете получить доступ к своим наблюдаемым и т.д. Через себя.

Оцените статью
TechArks.Ru
Добавить комментарий