Попытка понять ko.mapping в сочетании с TypeScript и RequireJS. Насколько я понимаю, я могу создать модель представления, привязать ее к представлению и подвергнуть сложный объект моему представлению с помощью модели представления. Мне не повезло, что это сработало. Большинство примеров в Интернете хотят показать, как принять ответ веб-службы и связать его напрямую. Я ищу более простой пример, чем это - я просто хочу отобразить несвязанный объект на экран. Я мог бы, конечно, сделать это вручную, но я думаю, что этот инструмент был разработан для точной цели ...knockout.mapping с TypeScript и RequireJS
У меня есть две потребности:
- показать значение на начальном экране - возможно, пустой
- Используйте чтобы изменить значение.
Я играл с некоторым примером кода в качестве доказательства концепции, как самой базовой версии, которую я мог бы придумать. Идея состоит в том, чтобы представить представление кнопкой. Текст кнопки должен загружаться с помощью «Hello World!», А при нажатии на кнопку «Прощай луну ...».
Я думаю, что моя точка зрения модель нуждается в двух объектов ...
- POJO
- связывания объекта, инстанцирован быть ko.mapping.fromJS ({})
Мое понимание (что, скорее всего, неверно) заключается в том, что отображение будет принимать POJO и автоматически создать наблюдаемую версию POJO в объекте привязки. Представление привязано к объекту привязки. В любое время, например, одним нажатием кнопки, я могу увеличить POJO и перезагрузить объект привязки, и мое представление будет соответствующим образом обновляться.
Модель My View подключена, так как я могу установить точки останова и посмотреть, как они попадают. Не удалось загрузить страницу, потому что связанный объект недоступен. Если я перехожу от ko.mapping к стандартным наблюдаемым, он загружается штрафом.
Что мне не хватает при рассмотрении ko.mapping? Неужели мой подход полностью испорчен?
Основные POJO класса
class DefaultModel {
public myField: string;
}
export = DefaultModel;
Посмотреть
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<script data-main="Application/require-config" src="Scripts/require.js"></script>
</head>
<body>
<h1>TypeScript HTML App</h1>
<button id="myMethodTest" data-bind="text: boundModel().myField, click: function() { myButton_Click() }" ></button>
</body>
</html>
View Model
/// <reference path="../Scripts/typings/knockout/knockout.d.ts" />
/// <reference path="../Scripts/typings/knockout.mapping/knockout.mapping.d.ts" />
import DefaultModel = require("Models/DefaultModel");
import ko = require("knockout");
class DefaultViewModel {
public basicModelInstance: DefaultModel;
public boundModel: any;
constructor() {
// INSTANTIATE THE BOUND MODEL TO BE A BLANK KO MAPPED AWARE OBJECT
this.boundModel = ko.mapping.fromJS({});
// SETUP A BASIC INSTANCE OF A POJO
this.basicModelInstance = new DefaultModel;
this.basicModelInstance.myField = "Hello World!";
// LOAD THE POPULATED POJO INTO THE BOUND OBVSERVABLE OBJECT
this.boundModel = ko.mapping.fromJS(this.basicModelInstance, {}, this.boundModel);
}
myButton_Click() {
// UPDATE THE POJO
this.basicModelInstance.myField = "Goodbye Moon...";
// RELOAD THE POJO INTO THE BOUND OBJECT
this.boundModel = ko.mapping.fromJS(this.basicModelInstance, {}, this.boundModel);
}
}
export = DefaultViewModel;
RequireJS Конфигурация
/// <reference path="../Scripts/typings/requirejs/require.d.ts" />
require.config({
baseUrl: "",
paths: {
"jQuery": "Scripts/jquery-2.1.1",
"knockout": "Scripts/knockout-3.2.0.debug",
"utilities": "Application/utilities",
"ViewModelMapper": "Application/ViewModelMapper",
"komapping": "Scripts/knockout.mapping-latest.debug"
},
shim: {
"jQuery": {
exports: "$"
},
komapping: {
deps: ['knockout'],
exports: 'komapping'
}
},
});
require(["jQuery"], function ($) {
$(document).ready(function() {
// alert('dom ready');
require(["utilities", "knockout", "ViewModelMapper", "komapping"], (utilities, knockout, viewModelMapper, komapping) => {
utilities.defineExtensionMethods($);
knockout.mapping = komapping;
var url = window.location;
var location = utilities.getLocation(url);
var urlPath = location.pathname;
var urlPathWithoutExtension = urlPath.replace(".html", "");
var viewModel = viewModelMapper.getViewModel(urlPathWithoutExtension);
knockout.applyBindings(viewModel);
});
});
});
Что касается импорта комапинга - это не ko.mapping плагин ko, и как таковой он не импортирует автономно, а импортирует его как часть нокаута, когда нокаут импортируется, если он установлен? – barrypicker
Прошло некоторое время с тех пор, как я работал с requireJS, поэтому на самом деле я не уверен, что это лучший способ справиться с этим, но похоже, что я загрузил их отдельно, потому что могут быть случаи, когда вы используете нокаут, но вам не нужно плагин отображения, так что вы загрузите его без причины. –
В любом случае, это не главная проблема здесь, поэтому я удалю ее из ответа. –