Question

我在处理这种情况的可能性之间迷失了：假设我们有以下限制：

敲除
SPA与Sammy.js - 通过Ajax加载Html

我的页面：

+-------------------------------+
| #navigation                   |
+---------+---------------------+
| #sidebar|    #content         |
|         |                     |
|         |                     |
|         |                     |
+---------+---------------------+

目前，我有一个appViewModel处理我网站的所有共享元素的数据绑定：#navigation和#sidebar。这个appViewModel在我的网站的每个页面上都有observable。

appViewModel = function () {
    var self = this;
    self.sidebarItemArray = ko.observableArray([x, y, z]);
    self.currentRoute = ko.observable();

    ...

    self.updateView = function(path, currentRoute) {
        return $.get(path, function( data ) {
            var $data = $(data);
            // Updates #content, TITLE and update the currentRoute observable.
            $( '#content' ).replaceWith($data.find('#content'));
            document.title = $data.filter('title').text();
            self.currentRoute(currentRoute);
            }, 'html');
    }

    Sammy(function() {
        this.get(':link'', function() {
            self.updateView(this.path, this.params.link);
        });
    }).run();
}
ko.applyBindings(new appViewModel());

现在，让我们说#content是通过Ajax Call加载的一块DOM。每次用户单击#navigation或#sidebar内的链接时，Sammy.js都会拦截它，然后更新#content。问题是#content中的新DOM本身就有数据绑定。

1）首先，我应该在＃content， replaceWith （如上所述）或模板绑定上使用 html 数据绑定获取模板的自定义函数？（http://knockoutjs.com/documentation/template-binding.html#note-5-dynamically-choosing-which-template-is-used）？ 这里的最佳做法是什么？

2）Sammy是否必须在appViewModel中生活，就像文档或其他地方一样？

3）一旦updateView方法完成，你将如何绑定新的DOM？如下？是否存在重新绑定某些DOM的风险，因为已经在没有第二个参数的情况下调用了ko.applyBindings？

ko.applyBindings(new routeSpecificViewModel() , document.getElementById("content"));

我很感谢你的帮助。

Answer 1

一个简单的解决方案是使页面的viewmodel成为可观察的，并按需加载它。使用变量记录是否已调用ko.applyBindings。来自knockout-spa框架的示例：

/*! knockout-spa (https://github.com/onlyurei/knockout-spa) * Copyright 2015-2016 Cheng Fan * MIT Licensed (https://raw.githubusercontent.com/onlyurei/knockout-spa/master/LICENSE) */

define(['app/shared/root-bindings', 'framework/page-disposer', 'ko', 'sugar'], function (
  RootBindings, PageDisposer, ko) {

  var initialRun = true;

  var Page = {
    init: function (name, data, controller, path) {
      Page.loading(false);

      name = name.toLowerCase();

      if ((Page.page().name == name) && (Page.page().data == data)) { // if the requested page is the same page, immediately call controller without going further
        if (controller) {
          controller(data);
        }

        document.title = Page.title();

        if (Page.initExtra) {
          Page.initExtra(name, data, controller);
        }

        return data;
      }

      var autoDispose = (Page.page().data.dispose && Page.page().data.dispose(Page)) || true; // if the requested page is not the same page, dispose current page first before swap to the new page
      if (autoDispose !== false) {
        // auto-dispose page's exposed observables and primitive properties to initial values. if not desired, return
        // false in dispose function to suppress auto-disposal for all public properties of the page, or make the
        // particular properties private
        PageDisposer.dispose(Page.page().data);
      }

      PageDisposer.init(data); //store initial observable and primitive properties values of the page
      var initialized = (data.init && data.init(Page)) || true; // init view model and call controller (optional) before template is swapped-in
      if (initialized === false) {
        return false; // stop initialization if page's init function return false (access control, etc.)
      }
      if (controller) {
        controller(data);
      }

      Page.pageClass([name, ('ontouchstart' in document.documentElement) ? 'touch' : 'no-touch'].join(' '));
      Page.page({
        name: name,
        data: data,
        path: path
      }); // to test if template finished rendering, use afterRender binding in the template binding

      document.title = Page.title();

      if (Page.initExtra) {
        Page.initExtra(name, data, controller); // useful for common init tasks for all pages such as anaylitics page view tracking, can be set in RootBindings
      }

      if (initialRun) {
        ko.applyBindings(Page, document.getElementsByTagName('html')[0]); // apply binding at root node to be able to bind to anywhere
        initialRun = false;
      }

      return data;
    },
    page: ko.observable({
      name: '', // name of the page - auto-set by the framework, no need to worry
      data: {
        init: function () {}, // preparation before the page's template is rendered, such as checking access control, init/instantiate modules used by the page, etc.
        dispose: function () {} // properly dispose the page to prevent memory leaks and UI leftovers (important for SPA since page doesn't refresh between page views) - remove DOM element event listeners, dispose knockout manual subscriptions, etc.
      }
    }),
    pageClass: ko.observable(''),
    loading: ko.observable(false),
    title: function () {
      return Page.page().name.titleize(); // override in RootBindings as needed
    }
  };

  Object.merge(Page, RootBindings); // additional root bindings as needed by the app

  return Page;

});

一个迷你但功能齐全的SPA框架，建立在Knockout，Require，Director，jQuery，Sugar之上。 https://github.com/onlyurei/knockout-spa

现场演示：https://knockout-spa.mybluemix.net

Knockout SPA Ajax加载模板

1 个答案: