将对象从 NodeJS 传递到客户端，然后传递到 KnockoutJS 视图模型答案

【问题标题】：Passing objects from NodeJS to client and then into KnockoutJS viewmodel将对象从 NodeJS 传递到客户端，然后传递到 KnockoutJS 视图模型
【发布时间】：2013-07-26 14:17:36
【问题描述】：

因此，多亏了 SO，我可以将对象从节点传递到客户端，但是将其放入淘汰视图模型有点尴尬。这些是我到目前为止的步骤（我已经包含了相关行的链接，因为它们出现在我的 github 项目中。认为上下文可能会有所帮助。）：

申请JSON.stringify并传递到玉文件
```
recipeJSON: JSON.stringify(recipe);
```

将其包装在一个 function in a header script 中，它只解析 JSON 并返回结果

    script        
        function getRecipeObject() {
            var r = '!{recipeJSON}';
            return JSON.parse(r);
        }

调用此函数并将结果传递给view model constructor

self.recipe = ko.observable(new Recipe(getRecipeObject()));

这可行，但有更好的方法吗？

问题澄清（编辑）：我觉得第 2 步没有必要。有没有办法直接将 JSON 从节点传递到 Recipe() 构造函数，而不用 getRecipeObject() 作为中间步骤？我尝试像这样直接传递recipeJSON

self.recipe = ko.observable(JSON.parse('!{recipeJSON}'));

我认为这不起作用，因为它不是翡翠模板并且无法访问变量。

【问题讨论】：

可以使用automapper Knockout插件knockoutjs.com/documentation/plugins-mapping.html
谢谢本杰明，您的评论是关于改进ko.observable(JSON.parse('!{recipeJSON}')); 行吗？如果是这样，我不确定那是我最初追求的改进，但我会调查一下。您能否检查我的说明，看看我的假设是否正确？

标签： javascript node.js knockout.js requirejs

【解决方案1】：

根据this question 的答案，将数据渲染到脚本中是不好的做法，我应该改为在页面加载时进行 XHR 调用。

【讨论】：

【解决方案2】：

编辑

我刚刚看到你链接了一个 github 存储库！所以你已经熟悉了其中的大部分......你甚至在/recipe/:id/view 设置了一个端点，所以现在我真的很困惑......什么不适合你？只是使用ko.utils.*进行反序列化的最后一步？

对所有的说明感到抱歉——我认为这比实际情况要简陋得多；我希望没有冒犯那里！

您真的不想返回要执行的脚本 - 相反，将其视为 DTO：仅存储数据的对象（无行为）。一个例子是：

{
   recipeID: 12,
   reviewIDs: [42, 12, 55, 31],
   rating: 4.2
   recipeName: "A super tasty pie!"
}

这个对象（表示）是一个投影——存储在数据库中的完整数据的简化版本。

下一步是创建一个端点来访问服务器上的数据。假设您使用的是 Express：

var app = express();
app.get('/recipes/:recipeID', function(req, res) {
     var recipeID = req.params.recipeID;

     // It would be cool if this existed, huh?
     getRecipeAsync(recipeID, function(recipe) {
         res.status(200).json(recipe);
     });
});

如果您向您的（假设的）应用程序（假设它是 https://localhost:8080/recipes/12）发送 GET 请求，您将获得表示 ID 为 12 的（当然是虚构的）配方的 json。

您可以使用 jQuery（或任何其他让 XHR 变得漂亮漂亮的库）来完成获取 JSON

var recipeID = 12;

$.ajax({
   url: "/recipes/" + recipeID,
   type: "GET"
}).then(function(recipe) {
   console.log("Hey! I got the recipe: %O", recipe);

   // Note: you might need to use ko.utils.fromJS(recipe) if the returned
   // data is JSON that ISN'T deserialized into an object
   var recipeObservable = ko.utils.fromJS(recipe);
});

这就是你需要知道的一切。显然，魔鬼在细节中，但这是基本思想；让我知道这是否有帮助！

【讨论】：