129

赏金

已经有一段时间了,我还有几个悬而未决的问题。我希望通过增加赏金也许这些问题会得到解答。

  1. 你如何使用带有 knockout.js 的 html 助手
  2. 为什么需要准备好文档才能使其工作(有关更多信息,请参阅第一次编辑)

  3. 如果我在视图模型中使用剔除映射,我该怎么做?由于映射,我没有功能。

    function AppViewModel() {
    
        // ... leave firstName, lastName, and fullName unchanged here ...
    
        this.capitalizeLastName = function() {
    
        var currentVal = this.lastName();        // Read the current value
    
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    
    };
    
  4. 我想使用插件,例如我希望能够回滚可观察对象,就好像用户取消了我希望能够返回到最后一个值的请求一样。根据我的研究,这似乎是通过制作可编辑插件等插件来实现的

    如果我使用映射,我该如何使用类似的东西?我真的不想使用在我的视图中手动映射的方法,即我将每个 MVC viewMode 字段映射到一个 KO 模型字段,因为我想要尽可能少的内联 javascript,这似乎是工作的两倍,那就是为什么我喜欢那个映射。

  5. 我担心为了使这项工作变得容易(通过使用映射)我会失去很多 KO 权力,但另一方面我担心手动映射只会做很多工作并且会使我的视图包含太多信息和将来可能会变得更难维护(例如,如果我在 MVC 模型中删除一个属性,我也必须在 KO 视图模型中移动它)


原帖

我正在使用 asp.net mvc 3,我正在研究淘汰赛,因为它看起来很酷,但我很难弄清楚它如何与 asp.net mvc 一起工作,尤其是视图模型。

对我来说,我现在做这样的事情

 public class CourseVM
    {
        public int CourseId { get; set; }
        [Required(ErrorMessage = "Course name is required")]
        [StringLength(40, ErrorMessage = "Course name cannot be this long.")]
        public string CourseName{ get; set; }


        public List<StudentVm> StudentViewModels { get; set; }

}

我将拥有一个具有一些基本属性(如 CourseName)的 Vm,并且在它之上会有一些简单的验证。如果需要,Vm 模型中也可能包含其他视图模型。

然后,如果我会使用 html 助手帮助我将它显示给用户,我会将这个 Vm 传递给视图。

@Html.TextBoxFor(x => x.CourseName)

我可能有一些 foreach 循环或其他东西来从学生视图模型的集合中获取数据。

然后,当我提交表单时,我会使用 jquery 并将serialize array其发送到控制器操作方法,该方法会将其绑定回视图模型。

使用 knockout.js,一切都不同了,因为您现在获得了它的视图模型,并且从我看到的所有示例中它们不使用 html 帮助器。

你如何将 MVC 的这两个特性与 knockout.js 一起使用?

我找到了这个视频,它简要地(视频的最后几分钟 @ 18:48)通过基本上拥有一个内联脚本来使用视图模型,该脚本具有被分配 ViewModel 中的值的 knockout.js 视图模型。

这是唯一的方法吗?在我的示例中,其中包含一组视图模型怎么样?我是否必须有一个 foreach 循环或其他东西来提取所有值并将其分配给淘汰赛?

至于 html 助手,视频对他们只字未提。

这些是让我感到困惑的两个领域,因为似乎没有多少人谈论它,并且当示例只是一些硬编码的值示例时,它让我对初始值和所有内容如何进入视图感到困惑。


编辑

我正在尝试 Darin Dimitrov 的建议,这似乎可行(尽管我不得不对他的代码进行一些更改)。不知道为什么我必须使用准备好的文档,但不知何故,如果没有它,一切都没有准备好。

@model MvcApplication1.Models.Test

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
   <script type="text/javascript">

   $(function()
   {
      var model = @Html.Raw(Json.Encode(Model));


// Activates knockout.js
ko.applyBindings(model);
   });

</script>

</head>
<body>
    <div>
        <p>First name: <strong data-bind="text: FirstName"></strong></p>
        <p>Last name: <strong data-bind="text: LastName"></strong></p>
        @Model.FirstName , @Model.LastName
    </div>
</body>
</html>

我必须将它包装在一个 jquery 文档周围,以使其工作。

我也收到此警告。不知道这到底是怎么回事。

Warning 1   Conditional compilation is turned off   -> @Html.Raw

所以我有一个起点,我想至少会在我做更多的游戏以及它是如何工作的时候更新。

我正在尝试阅读交互式教程,但改用 ViewModel。

不知道如何处理这些部分

function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
}

或者

function AppViewModel() {
    // ... leave firstName, lastName, and fullName unchanged here ...

    this.capitalizeLastName = function() {
        var currentVal = this.lastName();        // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };


编辑 2

我能够弄清楚第一个问题。对第二个问题毫无头绪。然而虽然。有人有什么想法吗?

 @model MvcApplication1.Models.Test

    @{
        Layout = null;
    }

    <!DOCTYPE html>

    <html>
    <head>
        <title>Index</title>
        <script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
        <script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
        <script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
       <script type="text/javascript">

       $(function()
       {
        var model = @Html.Raw(Json.Encode(Model));
        var viewModel = ko.mapping.fromJS(model);
        ko.applyBindings(viewModel);

       });

    </script>

    </head>
    <body>
        <div>
            @*grab values from the view model directly*@
            <p>First name: <strong data-bind="text: FirstName"></strong></p>
            <p>Last name: <strong data-bind="text: LastName"></strong></p>

            @*grab values from my second view model that I made*@
            <p>SomeOtherValue <strong data-bind="text: Test2.SomeOtherValue"></strong></p>
            <p>Another <strong data-bind="text: Test2.Another"></strong></p>

            @*allow changes to all the values that should be then sync the above values.*@
            <p>First name: <input data-bind="value: FirstName" /></p>
            <p>Last name: <input data-bind="value: LastName" /></p>
            <p>SomeOtherValue <input data-bind="value: Test2.SomeOtherValue" /></p>
            <p>Another <input data-bind="value: Test2.Another" /></p>

           @* seeing if I can do it with p tags and see if they all update.*@
            <p data-bind="foreach: Test3">
                <strong data-bind="text: Test3Value"></strong> 
            </p>

     @*took my 3rd view model that is in a collection and output all values as a textbox*@       
    <table>
        <thead><tr>
            <th>Test3</th>
        </tr></thead>
          <tbody data-bind="foreach: Test3">
            <tr>
                <td>    
                    <strong data-bind="text: Test3Value"></strong> 
<input type="text" data-bind="value: Test3Value"/>
                </td>
            </tr>    
        </tbody>
    </table>

控制器

  public ActionResult Index()
    {
              Test2 test2 = new Test2
        {
            Another = "test",
            SomeOtherValue = "test2"
        };

        Test vm = new Test
        {
            FirstName = "Bob",
            LastName = "N/A",
             Test2 = test2,

        };
        for (int i = 0; i < 10; i++)
        {
            Test3 test3 = new Test3
            {
                Test3Value = i.ToString()
            };

             vm.Test3.Add(test3);
        }

        return View(vm);
    }
4

3 回答 3

180

我想我已经总结了你所有的问题,如果我遗漏了什么,请告诉我(如果你能在一个地方总结你所有的问题会很好=))

笔记。ko.editable添加了与插件的兼容性

下载完整代码

你如何使用带有 knockout.js 的 html 助手

这很简单:

@Html.TextBoxFor(model => model.CourseId, new { data_bind = "value: CourseId" })

在哪里:

  • value: CourseId表示您正在valueinput控件的CourseId属性与模型和脚本模型中的属性绑定

结果是:

<input data-bind="value: CourseId" data-val="true" data-val-number="The field CourseId must be a number." data-val-required="The CourseId field is required." id="CourseId" name="CourseId" type="text" value="12" />

为什么需要准备好文档才能使其工作(有关更多信息,请参阅第一次编辑)

我还不明白为什么你需要使用ready事件来序列化模型,但似乎它只是必需的(虽然不用担心)

如果我在视图模型中使用剔除映射,我该怎么做?由于映射,我没有功能。

如果我理解正确,您需要向 KO 模型附加一个新方法,这很容易合并模型

有关更多信息,请在 - 来自不同来源的映射部分 -

function viewModel() {
    this.addStudent = function () {
        alert("de");
    };
};

$(function () {
    var jsonModel = '@Html.Raw(JsonConvert.SerializeObject(this.Model))';
    var mvcModel = ko.mapping.fromJSON(jsonModel);

    var myViewModel = new viewModel();
    var g = ko.mapping.fromJS(myViewModel, mvcModel);

    ko.applyBindings(g);
});

关于您收到的警告

警告 1 条件编译已关闭 -> @Html.Raw

您需要使用引号

与 ko.editable 插件的兼容性

我认为它会更复杂,但事实证明集成非常简单,为了使您的模型可编辑,只需添加以下行:(请记住,在这种情况下,我使用的是混合模型,来自服务器和在客户端中添加扩展名,并且可编辑的只是工作......这很棒):

    ko.editable(g);
    ko.applyBindings(g);

从这里你只需要使用插件添加的扩展来玩你的绑定,例如,我有一个按钮来开始像这样编辑我的字段,在这个按钮中我开始编辑过程:

    this.editMode = function () {
        this.isInEditMode(!this.isInEditMode());
        this.beginEdit();
    };

然后我有提交和取消按钮,代码如下:

    this.executeCommit = function () {
        this.commit();
        this.isInEditMode(false);
    };
    this.executeRollback = function () {
        if (this.hasChanges()) {
            if (confirm("Are you sure you want to discard the changes?")) {
                this.rollback();
                this.isInEditMode(false);
            }
        }
        else {
            this.rollback();
            this.isInEditMode(false);
        }
    };

最后,我有一个字段来指示字段是否处于编辑模式,这只是绑定启用属性。

this.isInEditMode = ko.observable(false);

关于您的阵列问题

我可能有一些 foreach 循环或其他东西来从学生视图模型的集合中获取数据。

然后,当我提交表单时,我会使用 jquery 和序列化数组并将其发送到控制器操作方法,该方法会将其绑定回视图模型。

您可以对 KO 执行相同操作,在以下示例中,我将创建以下输出:

在此处输入图像描述

基本上在这里,您有两个列表,使用 KO 创建Helpers并与 KO 绑定,它们绑定了一个dblClick事件,当触发时,从当前列表中删除所选项目并将其添加到另一个列表,当您发布到时Controller,每个列表的内容列表作为 JSON 数据发送并重新附加到服务器模型

掘金:

外部脚本

控制器代码

    [HttpGet]
    public ActionResult Index()
    {
        var m = new CourseVM { CourseId = 12, CourseName = ".Net" };

        m.StudentViewModels.Add(new StudentVm { ID = 545, Name = "Name from server", Lastname = "last name from server" });

        return View(m);
    }

    [HttpPost]
    public ActionResult Index(CourseVM model)
    {
        if (!string.IsNullOrWhiteSpace(model.StudentsSerialized))
        {
            model.StudentViewModels = JsonConvert.DeserializeObject<List<StudentVm>>(model.StudentsSerialized);
            model.StudentsSerialized = string.Empty;
        }

        if (!string.IsNullOrWhiteSpace(model.SelectedStudentsSerialized))
        {
            model.SelectedStudents = JsonConvert.DeserializeObject<List<StudentVm>>(model.SelectedStudentsSerialized);
            model.SelectedStudentsSerialized = string.Empty;
        }

        return View(model);
    }

模型

public class CourseVM
{
    public CourseVM()
    {
        this.StudentViewModels = new List<StudentVm>();
        this.SelectedStudents = new List<StudentVm>();
    }

    public int CourseId { get; set; }

    [Required(ErrorMessage = "Course name is required")]
    [StringLength(100, ErrorMessage = "Course name cannot be this long.")]
    public string CourseName { get; set; }

    public List<StudentVm> StudentViewModels { get; set; }
    public List<StudentVm> SelectedStudents { get; set; }

    public string StudentsSerialized { get; set; }
    public string SelectedStudentsSerialized { get; set; }
}

public class StudentVm
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Lastname { get; set; }
}

CSHTML 页面

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>CourseVM</legend>

        <div>
            <div class="editor-label">
                @Html.LabelFor(model => model.CourseId)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.CourseId, new { data_bind = "enable: isInEditMode, value: CourseId" })
                @Html.ValidationMessageFor(model => model.CourseId)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.CourseName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.CourseName, new { data_bind = "enable: isInEditMode, value: CourseName" })
                @Html.ValidationMessageFor(model => model.CourseName)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.StudentViewModels);
            </div>
            <div class="editor-field">

                @Html.ListBoxFor(
                    model => model.StudentViewModels,
                    new SelectList(this.Model.StudentViewModels, "ID", "Name"),
                    new
                    {
                        style = "width: 37%;",
                        data_bind = "enable: isInEditMode, options: StudentViewModels, optionsText: 'Name', value: leftStudentSelected, event: { dblclick: moveFromLeftToRight }"
                    }
                )
                @Html.ListBoxFor(
                    model => model.SelectedStudents,
                    new SelectList(this.Model.SelectedStudents, "ID", "Name"),
                    new
                    {
                        style = "width: 37%;",
                        data_bind = "enable: isInEditMode, options: SelectedStudents, optionsText: 'Name', value: rightStudentSelected, event: { dblclick: moveFromRightToLeft }"
                    }
                )
            </div>

            @Html.HiddenFor(model => model.CourseId, new { data_bind="value: CourseId" })
            @Html.HiddenFor(model => model.CourseName, new { data_bind="value: CourseName" })
            @Html.HiddenFor(model => model.StudentsSerialized, new { data_bind = "value: StudentsSerialized" })
            @Html.HiddenFor(model => model.SelectedStudentsSerialized, new { data_bind = "value: SelectedStudentsSerialized" })
        </div>

        <p>
            <input type="submit" value="Save" data-bind="enable: !isInEditMode()" /> 
            <button data-bind="enable: !isInEditMode(), click: editMode">Edit mode</button><br />
            <div>
                <button data-bind="enable: isInEditMode, click: addStudent">Add Student</button>
                <button data-bind="enable: hasChanges, click: executeCommit">Commit</button>
                <button data-bind="enable: isInEditMode, click: executeRollback">Cancel</button>
            </div>
        </p>
    </fieldset>
}

脚本

<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ko.editables.js")" type="text/javascript"></script>

<script type="text/javascript">
    var g = null;
    function ViewModel() {
        this.addStudent = function () {
            this.StudentViewModels.push(new Student(25, "my name" + new Date(), "my last name"));
            this.serializeLists();
        };
        this.serializeLists = function () {
            this.StudentsSerialized(ko.toJSON(this.StudentViewModels));
            this.SelectedStudentsSerialized(ko.toJSON(this.SelectedStudents));
        };
        this.leftStudentSelected = ko.observable();
        this.rightStudentSelected = ko.observable();
        this.moveFromLeftToRight = function () {
            this.SelectedStudents.push(this.leftStudentSelected());
            this.StudentViewModels.remove(this.leftStudentSelected());
            this.serializeLists();
        };
        this.moveFromRightToLeft = function () {
            this.StudentViewModels.push(this.rightStudentSelected());
            this.SelectedStudents.remove(this.rightStudentSelected());
            this.serializeLists();
        };
        this.isInEditMode = ko.observable(false);
        this.executeCommit = function () {
            this.commit();
            this.isInEditMode(false);
        };
        this.executeRollback = function () {
            if (this.hasChanges()) {
                if (confirm("Are you sure you want to discard the changes?")) {
                    this.rollback();
                    this.isInEditMode(false);
                }
            }
            else {
                this.rollback();
                this.isInEditMode(false);
            }
        };
        this.editMode = function () {
            this.isInEditMode(!this.isInEditMode());
            this.beginEdit();
        };
    }

    function Student(id, name, lastName) {
        this.ID = id;
        this.Name = name;
        this.LastName = lastName;
    }

    $(function () {
        var jsonModel = '@Html.Raw(JsonConvert.SerializeObject(this.Model))';
        var mvcModel = ko.mapping.fromJSON(jsonModel);

        var myViewModel = new ViewModel();
        g = ko.mapping.fromJS(myViewModel, mvcModel);

        g.StudentsSerialized(ko.toJSON(g.StudentViewModels));
        g.SelectedStudentsSerialized(ko.toJSON(g.SelectedStudents));

        ko.editable(g);
        ko.applyBindings(g);
    });
</script>

注意:我刚刚添加了这些行:

        @Html.HiddenFor(model => model.CourseId, new { data_bind="value: CourseId" })
        @Html.HiddenFor(model => model.CourseName, new { data_bind="value: CourseName" })

因为当我提交表单时,我的字段被禁用,所以值没有传输到服务器,这就是为什么我添加了几个隐藏字段来解决问题

于 2012-07-07T08:20:19.733 回答
23

您可以将 ASP.NET MVC 视图模型序列化为 javascript 变量:

@model CourseVM
<script type="text/javascript">
    var model = @Html.Raw(Json.Encode(Model));
    // go ahead and use the model javascript variable to bind with ko
</script>

淘汰文档中有很多示例可供您阅读。

于 2012-06-15T17:19:15.653 回答
3

要在服务器映射后获得额外的计算属性,您需要进一步增强客户端的视图模型。

例如:

var viewModel = ko.mapping.fromJS(model);

viewModel.capitalizedName = ko.computed(function() {...}, viewModel);

因此,每次从原始 JSON 映射时,都需要重新应用计算的属性。

此外,映射插件提供了增量更新视图模型的能力,而不是每次来回重新创建它(在 中使用附加参数fromJS):

// Every time data is received from the server:
ko.mapping.fromJS(data, viewModel);

这会在您的模型上执行仅映射属性的增量数据更新。您可以在映射文档中阅读更多相关信息

您在 Darin 的回答FluentJSON包的评论中提到。我是那本书的作者,但它的用例比 ko.mapping 更具体。如果您的视图模型是一种方式(即服务器->客户端),我通常只会使用它,然后数据以某种不同的格式(或根本不)发回。或者,如果您的 javascript 视图模型需要采用与服务器模型完全不同的格式。

于 2012-07-04T16:15:38.687 回答