Javascript 未定义的属性knockout.js+；mvc

我有一个

masterDetails

视图，我用数据库中的一些数据填充它（它填充得很好）。我在“主详细信息”视图中添加了一个按钮，以向我的工作流中添加一个步骤

我的视图模型：

/// <reference path="_references.js" />
var viewModel = function (data) {
    var self = this;
    self.SelectedWorkflow = ko.observable({
        Steps: ko.observableArray([]),
        Name: ko.observable("")
    });
    self.Workflows = ko.observableArray(data);

    self.addStep = function() {

        self.Steps.push(new Step(SelectedWorkflow, "Assignment here", "01/01/2014", "dd:mm:ss", "mail"));
    };
};

function Step(workflow,assignment, enddate, reminder, mailaddresses, type) {
    var self = this;
    self.Workflow = workflow;
    self.StepNumber = 0;
    self.Assignment = assignment;
    self.Enddate = enddate;
    self.Reminder = reminder;
    self.MailAddresses = mailaddresses;
    self.Type = type;

};
/// <reference path="workflowdetails-vm.js" />
$(document).ready(function () {
    $.ajax({
        url: "/WorkflowDetails/Index/",
        type: "POST",
        data: {},
        success: function (data) {
            var workflowlist = ko.mapping.fromJS(data.Workflows);
            vm = new viewModel(workflowlist);
            ko.applyBindings(vm);
        }
    });
    $(".right-aligned-section").hide();
});
$(document).delegate(".show-details", "click", function () {
    $(".right-aligned-section").fadeIn();
    var workflow = ko.dataFor(this);
    vm.SelectedWorkflow(workflow);
});

<div class="left-aligned-section">
    <ul data-bind="foreach: Workflows()">
        <li>
            <div class="workflow-item-border">
                <div>
                    <label data-bind="text: Name"></label>
                </div>
                <div>
                    <label data-bind="text: StartDate"></label>
                </div>
                <div>
                    <a href="#" class="show-details">Show Details</a>
                </div>
            </div>
        </li>
    </ul>
</div> 

<div class="right-aligned-section" data-bind="with: SelectedWorkflow">
    <div class="steps-header">
        <div class="left-aligned-div"><strong>Steps for&nbsp;</strong></div>
        <div class="left-aligned-div" data-bind="text: Name"></div>
    </div>
    <button data-bind="click: addStep">add step</button>
    <ul data-bind="foreach: Steps">
        <li>

            <div class="step-item-border">
                <div>
                    <div class="step-label">Stepnumber: </div>
                    <div style="font-weight: bold" data-bind="text: StepNumber"></div>
                </div>
                <div>
                    <div class="step-label">Assignment: </div>
                    <div style="font-weight: bold" data-bind="text: Assignment"></div>
                </div>
                <div>
                    <div class="step-label">Mails: </div>
                    <div style="font-weight: bold" data-bind="text: MailAddresses"></div>
                </div>
                <div>
                    <div class="step-label">End Date: </div>
                    <div style="font-weight: bold" data-bind="text: Enddate"></div>
                </div>
                <div>
                    <div class="step-label">Type: </div>
                    <div style="font-weight: bold" data-bind="text: Type"></div>
                </div>
            </div>
        </li>
    </ul>
</div> 

//
var viewModel=函数（数据）{
var self=这个；
self.SelectedWorkflow=ko.observable({
步骤：ko.observearray（[]），
名称：ko.可观察（“”）
});
self.Workflows=ko.observearray（数据）；
self.addStep=函数（）{
self.Steps.push（新步骤（选择工作流、“此处分配”、“2014年1月1日”、“dd:mm:ss”、“邮件”）；
};
};
功能步骤（工作流、分配、结束日期、提醒、邮件地址、类型）{
var self=这个；
self.Workflow=工作流；
self.StepNumber=0；
自我分配=分配；
self.Enddate=Enddate；
自我提醒=提醒；
self.MailAddresses=邮件地址；
自我类型=类型；
};
/// 
$（文档）.ready（函数（）{
$.ajax({
url:“/WorkflowDetails/Index/”，
类型：“POST”，
数据：{}，
成功：功能（数据）{
var workflowlist=ko.mapping.fromJS（data.Workflows）；
vm=新视图模型（工作流列表）；
ko.应用绑定（vm）；
}
});
$（“.right-aligned section”）.hide（）；
});
$（文档）.delegate（“.show details”，“click”，函数（）{
$（“.right-aligned section”）.fadeIn（）；
var workflow=ko.dataFor（此）；
vm.SelectedWorkflow（工作流）；
});

我的观点：

/// <reference path="_references.js" />
var viewModel = function (data) {
    var self = this;
    self.SelectedWorkflow = ko.observable({
        Steps: ko.observableArray([]),
        Name: ko.observable("")
    });
    self.Workflows = ko.observableArray(data);

    self.addStep = function() {

        self.Steps.push(new Step(SelectedWorkflow, "Assignment here", "01/01/2014", "dd:mm:ss", "mail"));
    };
};

function Step(workflow,assignment, enddate, reminder, mailaddresses, type) {
    var self = this;
    self.Workflow = workflow;
    self.StepNumber = 0;
    self.Assignment = assignment;
    self.Enddate = enddate;
    self.Reminder = reminder;
    self.MailAddresses = mailaddresses;
    self.Type = type;

};
/// <reference path="workflowdetails-vm.js" />
$(document).ready(function () {
    $.ajax({
        url: "/WorkflowDetails/Index/",
        type: "POST",
        data: {},
        success: function (data) {
            var workflowlist = ko.mapping.fromJS(data.Workflows);
            vm = new viewModel(workflowlist);
            ko.applyBindings(vm);
        }
    });
    $(".right-aligned-section").hide();
});
$(document).delegate(".show-details", "click", function () {
    $(".right-aligned-section").fadeIn();
    var workflow = ko.dataFor(this);
    vm.SelectedWorkflow(workflow);
});

<div class="left-aligned-section">
    <ul data-bind="foreach: Workflows()">
        <li>
            <div class="workflow-item-border">
                <div>
                    <label data-bind="text: Name"></label>
                </div>
                <div>
                    <label data-bind="text: StartDate"></label>
                </div>
                <div>
                    <a href="#" class="show-details">Show Details</a>
                </div>
            </div>
        </li>
    </ul>
</div> 

<div class="right-aligned-section" data-bind="with: SelectedWorkflow">
    <div class="steps-header">
        <div class="left-aligned-div"><strong>Steps for&nbsp;</strong></div>
        <div class="left-aligned-div" data-bind="text: Name"></div>
    </div>
    <button data-bind="click: addStep">add step</button>
    <ul data-bind="foreach: Steps">
        <li>

            <div class="step-item-border">
                <div>
                    <div class="step-label">Stepnumber: </div>
                    <div style="font-weight: bold" data-bind="text: StepNumber"></div>
                </div>
                <div>
                    <div class="step-label">Assignment: </div>
                    <div style="font-weight: bold" data-bind="text: Assignment"></div>
                </div>
                <div>
                    <div class="step-label">Mails: </div>
                    <div style="font-weight: bold" data-bind="text: MailAddresses"></div>
                </div>
                <div>
                    <div class="step-label">End Date: </div>
                    <div style="font-weight: bold" data-bind="text: Enddate"></div>
                </div>
                <div>
                    <div class="step-label">Type: </div>
                    <div style="font-weight: bold" data-bind="text: Type"></div>
                </div>
            </div>
        </li>
    </ul>
</div> 

步骤
添加步骤


步骤编号：
任务：
邮件：
结束日期：
类型：

当我按下按钮时，什么也没发生。我收到的错误是：

ReferenceError:未定义步骤

---

我知道这意味着什么，但我在web开发方面还不够精通，无法真正修复它。请帮助。

看起来您在执行

步骤之前忘记了
此
。按..

编辑：我对click handler函数做了一些进一步的更改

var viewModel = function (data) {
    this.SelectedWorkflow = ko.observable({
        Steps: ko.observableArray([]),
        Name: ko.observable("")
    });
    this.Workflows = ko.observableArray(data);

    this.addStep = function (selectedWorkflow) { // the current context is passed in from the click data-bind

        selectedWorkflow.Steps.push(new Step(selectedWorkflow, "Assignment here", "01/01/2014", "dd:mm:ss", "mail"));
    }
}

---

编辑：固定代码

这可能会起作用：

var viewModel = {};

viewModel.SelectedWorkflow = {
    Steps: ko.observableArray([]),
    Name: ko.observable("")
};

viewModel.Workflows = ko.observableArray(data);

viewModel.addStep = function () {
    viewModel.SelectedWorkflow.Steps.push(
        new Step(SelectedWorkflow, "Assignment here", "01/01/2014", "dd:mm:ss", "mail"));
    }
}

---

你已经忘记了

选择的工作流。步骤

我想…

请做一把小提琴你有没有打电话给ko.applyBindings（…）？是的，我有一个client.js文件，其余的代码在哪里？应用绑定，在哪里定义了

步骤

？您调用

新步骤（SelectedWorkflow，…

没有必要实际包含我的“步骤”立即添加新错误：ReferenceError:SelectedWorkflow不可用defined@AlexInTime使用大写字母写入SelectedWorkflow.Steps.push。javascript区分大小写。引用错误：SelectedWorkflow未定义类型错误：viewModel不是constructor@AlexInTime不要尝试用NEW关键字实例化它。viewModel={}是视图模型的文本实例化。我不会在任何地方实例化它，但这就是我没有得到的错误less@AlexInTime好的，创建一个提琴，我来看看-这应该是它，第一次使用提琴tbh。