我似乎经常遇到这样的情况:我正在渲染一个 View ，但该 View 所依赖的模型尚未加载。大多数情况下，我只有从 URL 中获取的模型 ID，例如对于假设的市场应用程序，用户使用该 URL 登陆该应用程序:
http://example.org/#/products/product0
在我的 ProductView , 我创建了一个 ProductModel并设置其 ID，product0然后我 fetch() .我用占位符渲染一次，当获取完成时，我重新渲染。但我希望有更好的方法。

在渲染任何东西之前等待模型加载感觉没有响应。重新渲染会导致闪烁，并且在各处添加“正在加载...请稍候”或微调器会使 View 模板变得非常复杂(特别是如果由于模型不存在而导致模型获取失败，或者用户无权查看这一页)。

那么，当您还没有模型时，渲染 View 的正确方法是什么？

我需要离开吗
来自标签 View 并使用 pushState ?服务器可以给我推一下吗？我都是耳朵。

从已经加载的页面加载:

我觉得当已经加载了一个页面而不是直接登陆 Product 时，您可以做更多的事情。页。

如果应用程序呈现指向产品页面的链接，例如呈现 ProductOrder收藏，还有什么可以做的吗？

<ul id="product-order-list">
  <li>Ordered 5 days ago. Product 0 <a href="#/products/product0">(see details)</a></li>
  <li>Ordered 1 month ago. Product 1 <a href="#/products/product1">(see details)</a></li>
</ul>

routes: {
  'products/:productid': 'showProduct'
  ...
}

showProduct: function (productid) {
  var model = new Product({_id: productid});
  var view = new ProductView({model: model});
  //just jam it in there -- for brevity
  $("#main").html(view.render().el);
}

最佳答案

好的，所以在我看来，有很多方法可以解决这个问题。我将列出我想到的所有内容，希望有人能与您合作，或者至少会激发您找到最佳解决方案。

我并不完全反对 T J 的回答。如果您在网站加载时继续对所有产品执行 collection.fetch() 操作(用户通常希望涉及一些加载时间)，那么您就拥有了所有数据，您可以像这样传递这些数据他提到。他的建议与我通常所做的唯一区别是，我通常在所有 View 中都引用了 app。所以，例如在我的 中初始化 函数在 app.js 我会做这样的事情。

initialize: function() {
    var options = {app: this}

    var views = {
        productsView: new ProductsView(options)
    };

    this.collections = {
        products: new Products()
    }

    // This session model is just a sandbox object that I use
    // to store information about the user's session. I would
    // typically store things like currentlySelectedProductId
    // or lastViewedProduct or things like that. Then, I just
    // hang it off the app for ease of access.
    this.models = {
        session: new Session()
    }
}

initialize: function(options) {
    this.app = options.app;

    this.views = {
        headerView: new HeaderView(options),
        productsListView: new ProductsListView(options),
        footerView: new FooterView(options)
    }; 
}

render: function(everythingLoaded) {
    var _this = this;

    if(!!everythingLoaded) {
        this.$el.html(_.template(this.template(this)));
    }
    else {
        // load a spinner template here if you want a spinner

        this.app.collection.products.fetch()
            .done(function(data) {
                _this.render(true);
            })
            .fail(function(data) {
                console.warn('Error: ' + data.status);
            });
    }

    return this;
}

render: function(everythingLoaded) {
    var _this = this;

    if(!!everythingLoaded) {
        this.$el.html(_.template(this.template(this)));
    }
    else {
        // load a spinner template here if you want a spinner

        this.app.collection.products.fetch()
            .done(function(data) {
                _this.render(true).postRender(true);
            })
            .fail(function(data) {
                console.warn('Error: ' + data.status);
            });
    }

    return this;
},

postRender: function(everythingLoaded) {
    if(!!everythingLoaded) {
        // do any DOM manipulation to the products list after 
        // it's loaded and rendered
    }
    else {
        // put code to start spinner
    }

    return this;
}

initialize: function(options) {
    this.app = options.app;
    this.productId = options.productId;

    this.views = {
        headerView: new HeaderView(options),
        productsListView: new ProductsListView(options),
        footerView: new FooterView(options)
    }; 
}

render: function(everythingLoaded) {
    var _this = this;

    if(!!everythingLoaded) {
        this.$el.html(_.template(this.template(this)));
    }
    else {
        // load a spinner template here if you want a spinner

        this.app.collection.products.get(this.productId).fetch()
            .done(function(data) {
                _this.render(true).postRender(true);
            })
            .fail(function(data) {
                console.warn('Error: ' + data.status);
            });
    }

    return this;
},

postRender: function(everythingLoaded) {
    if(!!everythingLoaded) {
        // do any DOM manipulation to the product after it's 
        // loaded and rendered
    }
    else {
        // put code to start spinner
    }

    return this;
}

关于javascript - 在哪一点上获取 View 所依赖的主干模型？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33748907/