我正在构建一个具有以下结构的 SPA 应用:
<body>
<!-- Main Container for our application -->
<div id="main">
</div>
<!-- End Main Container -->
<!-- Vendor Libraries -->
<script src="js/vendor/jquery/jquery-1.11.0.min.js"></script>
<script src="js/vendor/knockout/knockout-3.1.0.js"></script>
<script src="js/vendor/sammy/sammy-latest.min.js"></script>
<!-- Models -->
<script src="js/models/model1.js"></script>
<!-- ViewModels -->
<script src="js/viewmodels/viewModel1.js"></script>
<script src="js/viewmodels/viewModel2.js"></script>
<!-- App scripts -->
<script src="js/routes.js"></script>
<script src="js/app.js"></script>
</body>
html 文件有一个 div，它将保存 Sammy.js 处理的每个页面的 html，代码如下:
Sammy('#main', function() {
this.get('#/', function(context) {
context.$element().load('views/main1.html', function() {
ko.applyBindings(new ViewModel1(), $("#home")[0]);
});
});
this.get('#/text', function(context) {
context.$element().load('views/text.html', function() {
ko.applyBindings(new ViewModel2(), $("#home")[0]);
});
});
this.get('', function(context) {
this.redirect('#/');
});
}).run();
每次我加载每个 html 文件中找到的标记，然后应用我的 View 模型。
我的问题是:
- 除了使用 jquery load() 之外，您能否建议任何其他可能的方式来加载标记。
- 每次调用新路由时，我的旧绑定(bind)都会被释放吗？
最佳答案
1:这个问题非常“开放”。除了jquery.load之外，还有很多方法可以做到这一点。但真正的问题是:您需要另一种方式吗？您是否需要 $.load 无法提供的某种形式的控制？
如果这样做，请考虑切换到 jquery.get 或 jquery.ajax，并自行处理请求。这篇文章的底部是一个示例。
2:不，因为您不断将绑定(bind)应用于同一元素。相反，您想要做的是将绑定(bind)应用到 id 为“home”的容器内的第一个元素。然后，当您切换 View 时，您需要对要删除的 View 执行 ko.removeNode 操作。下面的代码示例说明了如何获得对进程的更多控制并清理背后的绑定(bind)。
function loadView(url, viewModel) {
$.get(url, function (response) {
var $container = $('#home'),
$view = $container.find('.view'),
$newView = $('<div>').addClass('view').html(response);
if ($view.length) {
ko.removeNode($view[0]); // Clean up previous view
}
$container.append($newView);
ko.applyBindings(viewModel, $newView[0]);
});
}
this.get('#/', function(context) {
loadView('views/main1.html', new ViewModel1());
});
this.get('#/', function(context) {
loadView('views/text.html', new ViewModel2());
});
我在这个例子中所做的是使用jquery.get，这样我们就可以控制加载和显示 HTML 的整个过程。然后，我将部分逻辑重构为一个单独的函数，该函数足够通用，可以在您拥有的每个 View 上使用。
当检索 View 时，我将其存储在具有“view”类的元素中。绑定(bind)将应用于此元素，并将其存储在容器元素中。切换 View 时，我会在新 View 添加到 DOM 之前清理并删除旧 View 。
这只是开始:在 loadView 函数中，您现在可以尝试调用可以在 View 模型上实现的通用方法，例如“activate”和“deactivate”。当检索新 View 等时，您还可以显示微调器而不是 View 。
关于javascript - KnockoutJS 与 Sammy.js SPA 建议，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23481588/