标签: knockout-mvc

另一位用户建议Knockout MVC处理一些AJAX发布问题.我读了一下它,我发现它是Knockout JS的一个包装器.所以我想知道两者之间真正的区别是什么？因为Knockout MVC存在,我应该为Knockout JS打扰吗？我何时会使用一个而不是另一个？

刚开始学习新的asp.net mvc4 SPA模板,注意到正在使用淘汰赛,所以请给我参考任何书籍/视频,它从头开始描述带有knockout.js的asp.net mvc.

我有表视图与knockoutjs模型绑定.

<tbody data-bind="foreach: items, visible: items().length > 0">
    <tr>
        <td data-bind="text: Title"></td>
        <td data-bind="text: Type"></td>
        <td data-bind="text: Author"></td>
        <td data-bind="text: Description"></td>
        <td data-bind="text: Time"></td>
        <td data-bind="text: Publisher"></td>
        <td data-bind="text: itemId"></td>
        <td>@Html.ActionLink("Edit", "Edit", "Manager", new {id = <knockoutjs model itemId value here>}, new {@class = "cssClass"})</td>
    </tr>       
</tbody>

我将解释代码.我有knockoutjs模型,其中包含itemArray(items).我想创建actionlink并将id值绑定到来自knockoutjs模型的(itemId).

希望你理解我的问题

先感谢您

我正在尝试将ko.observableArray的字符串绑定到模板,但是我无法让模板获取数组中字符串中的更改.

如果我绑定一组对象而不是一组字符串,我会获得JSON的更新,但是在我实际更改第一个非数组值之前它们不会触发任何内容.但是,我更愿意找到一个字符串数组,因为我可以将数据模型直接发送回服务器而无需任何后处理.

如何触发我的字符串数组的更新,以及如何确保它们正确触发更改而无需更新非数组值？

如果无法绑定到可观察的字符串数组,那么在更新可观察数组中的对象时如何才能触发事件？

请参阅此处的示例:http://jsfiddle.net/gcEHC/2/

在此示例中,当value更改时,array3的数据将反映在模型中,但是对array1和array2的数据的更改将永远不会显示.

JS:

var ViewModel = function() {
    this.value = ko.observable("hi")
    this.array1 = ko.observableArray(["hi", "there"]);
    this.array2 = ko.observableArray([ko.observable("hi"), ko.observable("there")]);
    this.array3 = ko.observableArray([{ data: "hi" }, { data: "there" }]);
};

ko.applyBindings(new ViewModel());

HTML:

<div class='liveExample'>   
    <p><input data-bind='value: value' /></p> 
    <div data-bind="foreach: array1">
        <p><input data-bind='value: $data' /></p> 
    </div>
    <div data-bind="foreach: array2">
        <p><input data-bind='value: $data' /></p> 
    </div>
    <div data-bind="foreach: array3">
        <p><input data-bind='value: data' /></p> 
    </div>
</div>

<pre data-bind="text: ko.toJSON($data)"></pre>

Durandal有一个名为shell的基本视图.

我在其上添加了一个搜索框,以允许管理员/质量保证用户模仿任何系统用户.在按钮上单击我希望能够更新当前显示的视图的视图.

• Shell (Blue) View (Red)

我将如何进行,在我的子视图上公开一个函数,以便我可以从shell调用它,或从子视图挂钩到shell的按钮单击事件.

题:

Durandal是否公开了我可以使用的钩子来冒泡或将事件传递给不同的视图或父容器？

我试图根据ko.observableArray返回的列未预先确定的位置输出数据表.

来自我的observableArray的项目样本self.userData()[0]将是:

Object {
        RowNum: 1, 
        ID: "123", 
        Surname: "Bloggs", 
        Forename: "Joe", 
        Address line 1: "1 Park Lane"
}

根据用户选择输出的内容,这些列每次都不同.

我希望输出中的列标题由数组中的内容确定,所以我想要的输出是:

<table>
   <thead>
      <tr>
         <th>RowNum</th>
         <th>ID</th>
         <th>Surname</th>
         <th>Forename</th>
         <th>Address line 1</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>123</td>
         <td>Bloggs</td>
         <td>Joe</td>
         <td>1 Park Lane</td>
      </tr>
      <!-- repeated for each row -->
   </tbody>
</table>

我知道我可以foreach用来重复行和列,但我不确定如何根据我的内容动态引用它observableArray.

目前我有这个基本结构:

<table>
    <thead> 
        <tr data-bind="foreach: userData [property name] ">
            <th>
               <span data-bind="text: [property name]"></span>
            </th>                   
        </tr>
    </thead>
    <tbody data-bind="foreach: userData"> …

让我们先提前感谢:)

好的,所以我试图使用knockout.mapping插件从匹配的JSON数据加载/映射分层的TypeScript/KnockoutJS类型的类,层次结构可以是N度.

我知道我可以执行以下操作来从JSON数据映射/加载顶级类.

var qry = ko.mapping.fromJS(jsData, {}, new Query());

但是我无法弄清楚如何将复杂的,N度,分层JSON数据映射/加载到一组TypeScript/KnockoutJS类并构建父/子关系.

我读过无数的艺术品,但是除了简单的父/子示例之外,它们在层次关系方面都不尽如人意,而且我无法使用knockout.mapping插件找到它们.

以下是我希望映射/加载的TypeScript类的减少定义.我是一个c ++/c#开发人员,所以这种性质的JavaScript对我来说是一个新手.

TypeScript对象

module ViewModel
{
    export class QueryModuleViewModel {
        public QueryObj: KnockoutObservable<Query>;

        constructor() {
            this.QueryObj = ko.observable<Query>();
        }

        public Initialize() {
            $.getJSON("/api/query/2", null,
                d => {
                    var qry = ko.mapping.fromJS(d, {}, new Query());
                    this.QueryObj(qry);
                });
        }
    }

    export class Query
    {
        public ID: KnockoutObservable<number>;
        public Name: KnockoutObservable<string>;
        public RootTargetID: KnockoutObservable<number>;
        public RootTarget: KnockoutObservable<QueryTarget>;

        constructor()
        {
            this.ID = ko.observable<number>(0);
            this.Name = ko.observable<string>();
            this.RootTargetID = ko.observable<number>();
            this.RootTarget = ko.observable<QueryTarget>(); …

我正在尝试取消在页面编辑期间完成的更改.但每当我点击取消时,都会反映更新后的更改.如何在点击取消按钮时还原更改.任何有关这方面的帮助将非常有用,因为我是新手淘汰
https://jsfiddle.net/tan2dgsa/

// ViewModel.js

var viewModel = {

    articles: [{
        id: 1,
        title: "KnockOut Templating",
        content: "Content for Knockout goes here."
    }, {
        id: 2,
        title: "SharePoint 2013 REST API",
        content: "Content for SharePoint."
    }, {
        id: 3,
        title: "Knockout with SharePoint",
        content: "Content for knockout and SharePoint."
    }],

    selectedTemplate: ko.observable("readOnly"),
    selectedMode: ko.observable(),    
};

viewModel.currentTemplate = function (tbl) {
    return tbl === this.selectedMode() ? 'editMode' : this.selectedTemplate();
}.bind(viewModel);

viewModel.reset = function (t) {
    this.selectedMode("editMode");
};
ko.applyBindings(viewModel);

我坚持认为我非常基本的东西,因此我需要一些专业知识来帮助我完成这项任务.

我有一个字典,它采用整数和字符串作为值来存储结果列表(我将在下面显示).我的视图模型和控制器有这个代码,它将数据作为JSON字符串发布到Knockout:

[ViewModel代码]

public class ResultModel
{
    public Dictionary<int, string> dictResult { get; set; }
    public string dictResultJson { get; set; }

    public ResultModel()
    {
        dictResult = new Dictionary<int, string>();
    }
}

[cshtml文件的代码]

<h2>Results</h2>
<table>
    <tbody data-bind="template: { name: 'tblResult', foreach: dictResultJson() }"></tbody>
</table>

<script id="tblResult" type="text/html">
    <tr>
        <td data-bind="value: key"></td>
        <td data-bind="value: value"></td>
    </tr>
</script>

<script type="text/javascript">
    var ResultModel = function(m) {
        var self = this;
        self.dictResultJson = ko.observableArray(mapDictionaryToArray(m.DictJson));
    };

    function mapDictionaryToArray(dictionary) {
        var result = [];
        for (var …

这是如何绑定ko.observableArray字符串的后续内容？

如何将可编辑的可观察字符串数组绑定到一组输入框？我不想绑定到一个对象数组,因为从服务器发送的底层JSON是一个字符串数组.

以下示例不起作用(在http://jsfiddle.net/LDNeA/上尝试).使用可观察字符串绑定对象数组是可以的,但直接绑定可观察字符串数组不起作用,并且模型不会更新.

重要的是文本框中的条目被映射回模型.

JS:

var ViewModel = function() {
    this.value = ko.observable("hi")
    this.array1 = ko.observableArray([ko.observable("hi"), ko.observable("there")]);
    this.array2 = ko.observableArray([{ data: ko.observable("hi") }, { data: ko.observable("there") }]);
};

ko.applyBindings(new ViewModel());

HTML:

<div class='liveExample'>   
    <p><input data-bind='value: value' /></p> 
    <div data-bind="foreach: array1">
        <p><input data-bind='value: $data' /></p> 
    </div>
    <div data-bind="foreach: array2">
        <p><input data-bind='value: data' /></p> 
    </div>
</div>

<pre data-bind="text: ko.toJSON($data)"></pre>