有没有一种搜索引擎友好的方式将服务器端呈现的HTML与客户端MVVM/MVC框架结合起来？

Question

（编辑：由于有些混乱，我更改了这个问题，现在可能是重复的，当前的答案可能没有意义，对此表示抱歉）

许多现代的js库，例如angularjs、emberjs、reactjs、ractivejs、riotjs，都使用类似的模式。即指定容器，定义模板，获取与模板匹配的数据，然后使用模板和数据在容器中呈现超文本标记语言。

这将在javascript发挥其魔力之前，在第一页加载一个空容器，对搜索引擎不太友好。我知道一些工具来解决这个问题，例如https://prerender.io/

我正在使用。net mvc和ReactJS，我找到了这个解决方案http://reactjs.net/guides/server-side-rendering.html“预先呈现React组件服务器端的初始状态”，我想这解决了reactjs的问题。

其他js库是否有类似的解决方案？或者这不是一个大问题，因为这些库应该只用于SPA？

（我也快速浏览了flight.js，这可能更适合我http://flightjs.github.io/）

Answer 1

不，这没有道理……）

Ractive需要有一个模板和数据来做一些循环。它无法从给定内容生成数据/模板。

但是如上所述，您可以将所有数据放在js variabel中，并使用它进行渲染。我认为你的用户不会因为这种方法而体验到任何“减速带”。实际上，您将从服务器下载更少的字节，因为您只下载一次模板，而不是每行下载一次。

Answer 2

是的，您可以简单地将您的模型序列化为json在javascript中。

以与使用所选MVVM相同的方式呈现视图。

要呈现视图模型，请使用以下方法：

  var data = @Html.Raw(Json.Encode(Model));

有了你的例子，这将成为：

var sampleComments = @Html.Raw(Json.Encode(Model));

var ractive = new Ractive({
                          el: example,                                  
                          data: {
                            comments: sampleComments
                            }
              });

如果要使用击倒，则可以执行以下操作：

var data = @Html.Raw(Json.Encode(Model));
var viewModel = new AViewModel(data);
ko.applyBindings(viewModel);

然后在页面上使用标准的ko绑定。

为了在淘汰赛中获得双向绑定，我只需确保属性的命名约定匹配。

例如，在集合索引中，它们可以使模型绑定器满意，即。

<tbody data-bind="foreach: Comments">
                <tr>    
                    <td><input data-bind="attr: { name: 'Comments[' + $index() + '].Author' }, value: Author" /></td>
                    <td><input data-bind="attr: { name: 'Comments[' + $index() + '].Content' }, value: Content" /></td>
                </tr>
            </tbody>