여러 사람을위한 양식을 작성하는 템플릿을 작성하려고합니다. "foreach"바인딩이나 템플릿을 사용하고 싶지 않습니다. observableArray에 사람을 추가하고 다음 사람을 위해 양식을 지우는 버튼을 사용하여 5 개의 입력을 사용하여 모든 데이터를 간단한 형식으로 저장하려고합니다.
아래에 전체 코드를 붙여 넣었습니다.
<html>
<head>
<title>Test Knockouts</title>
</head>
<body>
<div id="rootDiv">
<ul data-bind="with: Person">
<li data-bind="event: { click: $data.setupPersonTypeForm.bind($data, 'Member') }">
<a href="#" aria-controls="home">
<span class="radio-label">Member</span>
</a>
</li>
<li data-bind="event: { click: $data.setupPersonTypeForm.bind($data, 'Guest') }">
<a href="#" aria-controls="messages">
<span class="radio-label">Guest</span>
</a>
</li>
<li data-bind="event: { click: $data.setupPersonTypeForm.bind($data, 'Employee') }">
<a href="#" aria-controls="profile">
<span class="radio-label">Employee</span>
</a>
</li>
</ul>
<div>
Person Name:
<input type="text" data-bind="text: PersonName" /><br />
Person Age:
<input type="text" data-bind="text: PersonAge" /><br />
Person Type:
<input type="text" data-bind="text: PersonType" /><br />
Person Country:
<input type="text" data-bind="text: PersonCountry" /><br />
Person NetWorth:
<input type="text" data-bind="text: PersonNetWorth" />
</div>
</div>
<script src="jquery-2.1.4.js"></script>
<script src="knockout-3.4.0.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
var element = document.getElementById("rootDiv");
ko.applyBindings(rootVM, element);
var RootVM = function (data) {
var self = this;
self.Id = ko.observable();
self.Name = ko.observable();
self.Location = ko.observable();
self.TypeId = ko.observable();
self.Age = ko.observable();
self.Person = ko.observableArray([new PersonVM()]);
}
var rootVM = new RootVM();
var PersonVM = function (data) {
var self = this;
self.Id = ko.observable();
self.PersonName = ko.observable();
self.PersonType = ko.observable();
self.PersonAge = ko.observable();
self.PersonCountry = ko.observable();
self.PersonNetWorth = ko.observable();
self.PersonTypeIdPlaceholder = ko.observable();
self.ShowEmployeeTitleField = ko.observable(false);
self.setupPersonTypeForm = function (personType) {
self.ShowEmployeeTitleField(false);
switch (personType) {
case "Member":
self.PersonTypeIdPlaceholder("Member ID");
break;
case "Guest":
self.PersonTypeIdPlaceholder("Guest ID");
break;
case "Employee":
self.PersonTypeIdPlaceholder("Employee ID");
self.ShowEmployeeTitleField(true);
break;
}
}
self.setupPersonTypeForm('Member');
self.Property = ko.observableArray([new PropertyVM()]);
}
var PropertyVM = function (data) {
var self = this;
self.Id = ko.observable();
self.PropertyPlace = ko.observable();
self.PropertySize = ko.observable();
self.PropertyName = ko.observable();
self.PropertyAge = ko.observable();
}
});
</script>
</body>
</html>
다음과 같은 오류가 발생합니다.
knockout-3.4.0.js : 72 Uncaught ReferenceError : Unable to process binding "with : function () {return Person}"메시지 : Person is not defined
여기서 내가 어디로 잘못 가고 있습니까?
어떤 도움을 주시면 감사하겠습니다!.
이 줄에서 :
ko.applyBindings(rootVM, element);
... rootVM입니다 undefined. 아직 값을 할당하지 않았습니다. 당신은에 그것을 이동하려는 후에 당신의
var rootVM = new RootVM();
... 다시 할 필요가 후
var PersonVM = function (data) { ... };
... 사용하기 때문에 PersonVM.
만 선언 하지 과제를 게양한다. 당신이 가지고 있을때:
(function() {
console.log(foo);
var foo = 42;
})();
... undefined42가 아니라. 그 코드는 다음과 같이 해석되기 때문입니다.
(function() {
var foo = undefined;
console.log(foo);
foo = 42;
})();
그것은 당신의 코드를 통해 일어나고 있습니다.
적어도 몇 가지 다른 문제가 있습니다.
당신은 Person그것이 하나의 물건 인 것처럼 사용 하고 있지만 당신은 그것을 사물의 배열로 정의하고 있습니다. 위의 문제를 해결하면 click배열에 setupPersonTypeForm메서드 가 없기 때문에 이벤트를 바인딩 할 수 없다는 문제가 발생합니다 ( Person내부에있는 배열이 아니라 사용자의 경우).
에만 존재하는 목록 아래의 속성을 Person사용하고 있지만 목록에있는 속성 만 사용하고 with: Person있습니다.
당신의 목표가 사람들의 목록을 가지고 그 목록에있는 사람들을 양식으로 추가 / 편집 할 수있는 것이라면, 여기에있는 나의 대답 은 "사람들"이 아닌 "프로젝트"로 거의 동일한 일을하는 방법을 보여줍니다.
다음은 컨텍스트에 대해 중복 된 답변의 간단한 예입니다.
function Project(title, priority) {
this.title = ko.observable(title || "");
this.priority = ko.observable(priority || "Medium");
}
function ProjectViewModel() {
var self = this;
this.priorityOptions = ko.observableArray(["High", "Medium", "Low"]);
this.projects = ko.observableArray();
this.editing = ko.observable(new Project());
this.addProject = function() {
this.projects.push(this.editing());
this.editing(new Project());
};
}
ko.applyBindings(new ProjectViewModel(), document.body);<div>
<div>
<label>
Title:
<input type="text" data-bind="value: editing().title, valueUpdate: 'input'">
</label>
</div>
<div>
<label>
Priority:
<select data-bind='options: priorityOptions, value: editing().priority'></select>
</label>
</div>
<div>
<button type="button" data-bind="click: addProject, enable: editing().title">Add Project</button>
</div>
<hr>
<div>Projects:</div>
<div data-bind="foreach: projects">
<div>
<span data-bind="text: title"></span>
(<span data-bind="text: priority"></span>)
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>댓글에서 다음과 같이 질문했습니다.
- 각 프로젝트에 대한 하위 카테고리가 있고 각 특정 프로젝트 내에 여러 하위 카테고리 항목을 추가하고 싶습니다. 어떤 뷰 모델에 addSubCategory 함수를 배치합니까? 각 손자 항목을 어떻게 추적합니까?
중첩 된 동일한 구조를 반복합니다. 예를 들어, 우리는 "프로젝트"에 "작업"목록을 쉽게 추가 할 수 있습니다.
- "with"바인딩을 사용할 수없는 이유는 무엇입니까? 녹아웃에 제한이 있습니까?
원한다면 할 수 있습니다. 프로젝트에 두 개의 필드 만 있었기 때문에 원래 예제에서는 사용하지 않았지만 대신 data-bind="with: editing"위의 필드를 넣어서 a로 래핑 할 수 with있습니다.
다음은 작업과 with바인딩을 사용하는 예제입니다 ( editing위에서 변경 했습니다. editProject지금부터 editTask).
function Task(label, difficulty) {
this.label = ko.observable(label);
this.difficulty = ko.observable(difficulty || "Normal");
}
function Project(title, priority) {
this.title = ko.observable(title || "");
this.priority = ko.observable(priority || "Medium");
this.tasks = ko.observableArray();
this.editTask = ko.observable(new Task());
this.addTask = function() {
this.tasks.push(this.editTask());
this.editTask(new Task());
};
}
function ProjectViewModel() {
var self = this;
this.priorityOptions = ko.observableArray(["High", "Medium", "Low"]);
this.difficultyOptions = ko.observableArray(["Hard", "Normal", "Easy"]);
this.projects = ko.observableArray();
this.editProject = ko.observable(new Project());
this.addProject = function() {
this.projects.push(this.editProject());
this.editProject(new Project());
};
}
ko.applyBindings(new ProjectViewModel(), document.body);ul {
margin-top: 0;
margin-bottom: 0;
}<div>
<!-- Added a new div with a 'with' binding -->
<div data-bind="with: editProject">
<div>
<label>
Title:
<input type="text" data-bind="value: title, valueUpdate: 'input'">
</label>
</div>
<div>
<label>
Priority:
<select data-bind='options: $parent.priorityOptions, value: priority'></select>
</label>
</div>
<div style="padding-left: 3em">
Tasks for this project:
<div style="padding-left: 2em">
New task:
<div data-bind="with: editTask">
<div>
<label>
Difficulty:
<select data-bind='options: $root.difficultyOptions, value: difficulty'></select>
</label>
</div>
<div>
<label>
Label:
<input type="text" data-bind="value: label, valueUpdate: 'input'">
</label>
</div>
</div>
<button type="button" data-bind="click: addTask, enable: editTask().label">Add Task</button>
</div>
<div data-bind="foreach: tasks">
<div>
[<span data-bind="text: difficulty"></span>]
<span data-bind="text: label"></span>
</div>
</div>
</div>
</div>
<div>
<button type="button" data-bind="click: addProject, enable: editProject().title">Add Project</button>
</div>
<hr>
<div>Projects:</div>
<div data-bind="foreach: projects">
<div>
<span data-bind="text: title"></span>
(<span data-bind="text: priority"></span>)
</div>
<ul data-bind="foreach: tasks">
<li>[<span data-bind="text: difficulty"></span>]: <span data-bind="text: label"></span></li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다