使用require-js敲除-未正确加载
knockout with require js - Not loading correctly
大家好,我在使用require-js和knock-js时遇到了一些困难。我正在尝试将require-js实现到我正在进行的现有项目中。一切都很顺利,直到我以淘汰赛的方式遇到了障碍。
我试图遵循淘汰赛页面上提供的示例:http://knockoutjs.com/documentation/amd-loading.html
当尝试ko.applyBindings(new GDI_Application());
时,它只是返回为未定义。我还设置了https://github.com/rniemeyer/knockout-amd-helpers以加载外部模板。在此处关注另一个指南http://www.newsuntold.dk/post/using-requirejs-and-knockout-amd-helpers-with-knockout但仍然没有任何区别仍然得到CCD_ 2
你们觉得我少了什么?
更新的代码:我的HTML代码:
<script data-main="js/GDI_MAIN" src="js/require.js"></script>
这是我的GDI_MAIN js代码:
require.config({
paths: {
"jqueryUI": "../assets/jqueryUI/jquery-ui.min",
"bootstrap": "bootstrap.min",
"bootstrap_select": "../assets/silviomoreto-bootstrap-select-a8ed49e/dist/js/bootstrap-select.min",
"jquery_timepicker": "jquery-ui-timepicker-addon",
"jqueryui_timepicker_ext": "jquery-ui-sliderAccess",
"moment": "moment",
"cookie": "js.cookie",
"knockout-amd-helpers": "knockout-amd-helpers.min",
"text": "text"
},
"shim": {
bootstrap: {
deps : [ 'jquery'],
exports: 'Bootstrap'
},
bootstrap_select: {
deps : [ 'jquery', 'bootstrap'],
exports: 'Bootstrap_Select'
},
jquery_timepicker: {
deps : [ 'jquery'],
exports: 'Jquery_Timepicker'
},
jqueryui_timepicker_ext: {
deps : [ 'jquery'],
exports: 'Jqueryui_Timepicker_Ext'
}
}
});
require(["knockout", "GDI_Application", "GDI_Buttons", "GDI_common", "knockout-amd-helpers", "text", "moment"], function (ko, GDI_Application) {
ko.amdTemplateEngine.defaultPath = "../templates";
ko.applyBindings(new GDI_Application());
GDI_Application.fetchdata();
});
这是GDI_应用程序代码:
define(["knockout", "jquery", "jqueryUI", "bootstrap", "bootstrap_select","jquery_timepicker", "jqueryui_timepicker_ext", "moment"], function(ko, $) {
ko.bindingHandlers.modal = {
init: function (element, valueAccessor) {
$(element).modal({
show: false
});
var value = valueAccessor();
if (typeof value === 'function') {
$(element).on('hide.bs.modal', function() {
value(false);
});
}
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).modal("destroy");
});
},
update: function (element, valueAccessor) {
var value = valueAccessor();
if (ko.utils.unwrapObservable(value)) {
$(element).modal('show');
} else {
$(element).modal('hide');
}
}
}
incidentViewModel = function IncidentViewModel() {
var self = this;
self.showDialog = ko.observable(false);
self.incidents = ko.observableArray();
self.currentIncident = ko.observable();
Incident.BASE_URL = '../../_vti_bin/listData.svc/GDI_DEV_Incidents';
Incident.CREATE_HEADERS = {"accept": "application/json;odata=verbose"};
Incident.UPDATE_HEADERS = {"accept": "application/json;odata=verbose","If-Match": "*"};
self.fetchdata = function() {
console.log("fetching - Attempting to execute code.");
$.getJSON(Incident.BASE_URL+filterlist+orderlist,
function(data) {
if (data.d.results) {
self.incidents(data.d.results.map(function(item) {
return new Incident(item);
}));
$('#loading').hide("slow");
$('#IncidentTable').show("slow");
console.log("fetching data completed");
}else {
console.log("no results received from server");
}
});
}
self.saveorupdate = function() {
console.log("save function executed");
var id = this.ID,
url = Incident.BASE_URL + (id ? '(' + encodeURIComponent(id) + ')' : '');
console.log(url);
return $.ajax(url, {
type: id ? "MERGE" : "POST",
data: ko.toJSON({
Description: this.Description,
Incident: this.Incident
}),
processData: false,
contentType: "application/json;odata=verbose",
headers: id ? Incident.UPDATE_HEADERS : Incident.CREATE_HEADERS,
success: function (data) {
incidentViewModel.fetchdata();
console.log("Record was sucessfully saved.");
}
});
}
self.ShowSelectedIncident = function(data) {
self.currentIncident(data);
self.showDialog(true);
console.log("The show selected incident has been ran.");
}
self.clearCurrentIncident = function() {
self.showDialog(false);
self.currentIncident(null);
}
self.AddNewIncident = function() {
self.showDialog(true);
self.currentIncident({ID:"",Description:"",Incident:""});
console.log("AddNewIncident has been executed sucessfully.");
}
}
function Incident(data) {
var self = this;
self.ID = data.ID;
self.Description = ko.observable(data.Description);
self.Composante = ko.observable(data.Composante);
self.Incident = ko.observable(data.Incident);
self.ÉtatValue = ko.observable(data.ÉtatValue);
self.PrioritéValue = ko.observable(data.PrioritéValue);
self.Duré = ko.observable(data.Duré);
self.Service = ko.observable(data.Service);
self.Début_imputabilité = ko.observable(data.Début_imputabilité);
self.Début_de_interruption = ko.observable(data.Début_de_interruption);
self.Fin_de_interruption = ko.observable(data.Fin_de_interruption);
self.Groupe_Support_Prime = ko.observable(data.Groupe_Support_Prime);
self.ResponsableValue = ko.observable(data.ResponsableValue);
self.Impact = ko.observable(data.Impact);
self.Dépanage = ko.observable(data.Dépanage);
self.Suivi = ko.observable(data.Suivi);
self.Ressources = ko.observable(data.Ressources);
}
return incidentViewModel;
});
我突然想到:GDI_Application当前没有返回任何内容。
看起来IncidentViewModel是你的应用程序ViewModel,所以你需要从GDI_Application代码中返回IncidentViewModel,这样KO就有了可以应用绑定的东西。
var incidentViewModel = function IncidentViewModel() {
// your code here;
}
//later on
return incidentViewModel;
正如您所指出的,对GDI_Application.fetchdata()的调用将不起作用。这一定是你使用完全不同的方法时留下的后遗症。
你可以做
var app = new GDI_Application();
ko.applyBindings(app);
app.fetchdata();
此外,我还考虑将GDI_Application重命名为IncidentViewModel,因为这就是它的真实情况。
这不是我所知道的问题的直接答案,但我已经为.NET生态系统开发了一个模板,该模板使用组件架构将RequireJS和KnockoutJS结合在一起,还为类似.NET MVC的操作和视图添加了NancyFX,还包括Bootstrap和jQuery支持。
你可以从我的github账户下载,网址:
https://github.com/shawty/dotnetnotts15
它使用Knockout组件和自定义标记,允许模块化代码重用,尽管它是为NancyFX连接的,但它只是一个标准的ASP.NET web应用程序,因此您可以很容易地删除Nancy并将ASP.NET MVC添加回,甚至可以使用您选择的任何后端。
- 如何在运行时在angular 2中加载外部js脚本
- 使用优化器在慢速连接上加载main.js时需要js超时
- 如何根据条件加载Anguar.js控制器
- 通过浏览器加载页面时触发加载脚本(js或jQuery)'s”;返回“;作用
- 无法加载Ace.js编辑器模式和主题(命名空间项目&AMD require.js&grunt
- Webpack-无法使用$.getScript加载bundle.js
- 如何在页面加载angular js上设置从ajax调用中选择的选项
- 加载Ember.js后调用函数
- 在WordPress站点中加载jquery.js后加载javascript代码
- IE 9 BHO插件.加载外部JS文件时出现错误SCRIPT1014
- 我无法在发布页面上加载peoplepicker.js它'正在工作的SitePages
- 在混合基本 URL 下动态加载 require.js 模块
- 按钮链接加载后JS确认弹出
- HTML5 Canvas无法加载Kinetic.js
- 如何在不使用绝对 url 的情况下从多个路径加载 require.js
- 使用Require.js加载Dropzone.js.
- 动态加载require.js的依赖项
- <脚本>标签没有't加载require.js有效
- 使用require.js加载spin.js
- 如何用Require.js加载Heyoffline.js