Javascript 如何将雄辩的模型传递给Knockout.js视图模型构造函数？

我有一个解决方案（见下文），但它既尴尬又笨拙&我想听听其他人是如何解决这个问题的

下面是一个简单的例子来说明这个问题：

假设我有一个雄辩的

用户

模型，我正在创建一个“编辑用户”页面，用于处理值到DOM元素的绑定

在本页的控制器方法中，我执行以下操作：

public function getEditUser($id = null)
{
    return View::make("account.edituser")
        ->with("user", User::find($id))
        ->with("groups", Group::all());
}

var createUserViewModel = function (user, groups) {
    return {
        id: ko.observable(user.id),
        name: ko.observable(user.name),
        groups: ko.observableArray(user.groups),
        // ...other attributes go here

        // the list of available groups
        availableGroups: ko.observableArray(groups)
    };
};

// instantiate the view model
var viewModel = createUserViewModel(
    // note that I'm using Smarty for my templating system. The
    // lines below apply the json_encode method and disable the
    // htmlspecialchars function which I have set up to encode
    // all output by default
    {$user|json_encode nofilter},
    {$groups|json_encode nofilter}
);

ko.applyBindings(viewModel);

其中

组

模型用于我的访问控制组。用户可以是零个或多个组的成员，并且以正常方式为雄辩的模型建立关系

在模板中，我使用

data bind

属性设置了一组元素（文本、选择、单选按钮等），以将我的淘汰视图模型绑定到元素

在页面的

部分，我有以下内容：

public function getEditUser($id = null)
{
    return View::make("account.edituser")
        ->with("user", User::find($id))
        ->with("groups", Group::all());
}

var createUserViewModel = function (user, groups) {
    return {
        id: ko.observable(user.id),
        name: ko.observable(user.name),
        groups: ko.observableArray(user.groups),
        // ...other attributes go here

        // the list of available groups
        availableGroups: ko.observableArray(groups)
    };
};

// instantiate the view model
var viewModel = createUserViewModel(
    // note that I'm using Smarty for my templating system. The
    // lines below apply the json_encode method and disable the
    // htmlspecialchars function which I have set up to encode
    // all output by default
    {$user|json_encode nofilter},
    {$groups|json_encode nofilter}
);

ko.applyBindings(viewModel);

createUserViewModel

函数的

user

参数将采用JSON编码，因此它将如下所示：

{id:1234，name:“Joe Smith”，groups:['group1'，'group2']，…}

这是一个简单的例子：我有几个表格可以输入比这复杂得多的其他信息

这有几个问题：

正如我所说，这很尴尬。对于较大的模型，很难读取由此生成的源代码

我怀疑这里存在XSS漏洞，因为我通过

json_encode

直接将数据回送到脚本元素的主体中。我还没能利用这一点，但我认为其他人可以找到办法

但是我想不出另一种方法可以不从根本上改变应用程序的工作方式（即使用AJAX调用检索数据）

有谁能分享一个更好的方法来做到这一点吗？

Re（1）你需要看看非常有用的映射，它正是为此而设计的。。。这将为您替换createUserViewModel函数，并使您无需手动将JSON对象转换为可观察的对象

Re（2）我在安全性和XSS方面还不够专业，无法给出权威性的答案，但在我看来还可以。只要在存储用户和组数据之前对其进行了清理，就可以将其作为JSON进行回显。如果您没有为用户提供文本框或其他输入，从而影响此数据，那么攻击者就无法插入恶意脚本。加上JSON编码本身是一个很好的净化，因为任何JavaScript都将以字符串结束。因此，可以肯定的是，考虑到：

{$user|json_encode nofilter}

将打印一些JSON，您可以立即在其上尝试JSON.parse：

var user = JSON.parse({$user|json_encode nofilter})

---

然后在脚本中对其执行任何操作。

我以前在映射中看到过这些内容，但没有仔细查看。我再看看。谢谢仔细阅读“高级使用”一节，这将帮助您了解这是否适用于更复杂的模型。它肯定会处理您上面给出的示例。