[英]knockoutjs html binding not working
我正在嘗試使用html綁定將某些html綁定到標簽,從而導致標簽顯示指定的文本。
該標簽不顯示任何文本,但是在瀏覽器中檢查頁面顯示該標簽使用html綁定顯示了一些文本(未顯示文本)。
為什么文本未顯示在標簽中?
這是我的代碼:
將html綁定到viewmodel(注意代碼注釋):
"use strict";
qb.bindings.QuoteDetails = function (quoteDetailsVm) {
var _$step1 = $("#step1");
var _quoteDetailsSelector = ".quoteBuy";
_$step1.find(".saveQuote" + _quoteDetailsSelector)
.koClick("saveQuote")
.koText("saveQuoteLabel");
var ctaText = _$step1.find(".callToActionDescription");
ctaText.koHtml("processedCtaText");
$.koDataBind();
quoteDetailsVm.email = "'sdfd'";
_$step1.find("div.email label").koHtml(quoteDetailsVm.email); // this is the label to bind
var _nodes = _$step1.find(_quoteDetailsSelector);
_nodes.push(ctaText[0]);
_.each(_nodes, function(node) {
ko.applyBindings(quoteDetailsVm, node);
});
};
這是我們定義kohtml()的地方:
(function ($) {
var _bindings = [];
var _koBind = function ($selector, binding, value) {
var _jsToString = function(input) {
var _result = "";
for (var _key in input) {
var _val = input[_key];
if (typeof(_val) === "object")
_val = _jsToString(_val);
_result = _result + (_result ? ", " : "") + _key + ": " + _val;
}
return "{ " + _result + " }";
};
if ($selector.length === 0) {
console.warn("koBind selector does not return any elements - " + $selector.selector);
return $selector;
}
if (typeof (value) === "object")
value = _jsToString(value);
_bindings.push({
$selector: $selector,
binding: binding,
value: value
});
return $selector;
};
$.fn.koBind = function (binding, value) {
return _koBind(this, binding, value);
};
$.fn.koVisible = function (visibility) {
return _koBind(this, "visible", visibility);
};
$.fn.koText = function (text) {
return _koBind(this, "text", text);
};
$.fn.koHtml = function (html) {
return _koBind(this, "html", html);
};
$.fn.koCss = function (classes) {
return _koBind(this, "css", classes);
};
$.fn.koStyle = function (styles) {
return _koBind(this, "style", styles);
};
$.fn.koAttr = function (attrs) {
return _koBind(this, "attr", attrs);
};
$.fn.koForeach = function (enumerable) {
return _koBind(this, "foreach", enumerable);
};
$.fn.koIf = function (condition) {
return _koBind(this, "if", condition);
};
$.fn.koIfnot = function (condition) {
return _koBind(this, "ifnot", condition);
};
$.fn.koWith = function (context) {
return _koBind(this, "with", context);
};
$.fn.koClick = function (callback) {
return _koBind(this, "click", callback);
};
$.fn.koEvent = function (events) {
return _koBind(this, "event", events);
};
$.fn.koSubmit = function (onSubmit) {
return _koBind(this, "submit", onSubmit);
};
$.fn.koEnable = function (condition) {
return _koBind(this, "enable", condition);
};
$.fn.koDisable = function (condition) {
return _koBind(this, "disable", condition);
};
$.fn.koValue = function (value) {
return _koBind(this, "value", value);
};
$.fn.koHasfocus = function (condition) {
return _koBind(this, "hasfocus", condition);
};
$.fn.koChecked = function (condition) {
return _koBind(this, "checked", condition);
};
$.fn.koOptions = function (optionList) {
return _koBind(this, "options", optionList);
};
$.fn.koOptionsCaption = function (optionsCaption) {
return _koBind(this, "optionsCaption", optionsCaption);
};
$.fn.koSelectedOptions = function (selectedList) {
return _koBind(this, "selectedOptions", selectedList);
};
$.fn.koUniqueName = function (enabled) {
return _koBind(this, "uniqueName", enabled);
};
$.fn.koPlaceholder = function(text) {
return _koBind(this, "attr", { placeholder: text });
};
$.koDataBind = function () {
var _elements = [];
// put all the elements into an array
var _findElement = function (el) {
var _found = _elements.filter(function (element) {
return element.element == el;
});
if (_found)
return _found[0];
return false;
};
$.each(_bindings, function (i, binding) {
$.each(binding.$selector, function (j, el) {
var _element = _findElement(el);
if (_element) {
_element.bindings.push({
binding: binding.binding,
value: binding.value
});
} else {
_elements.push({
element: el,
bindings: [{
binding: binding.binding,
value: binding.value
}]
});
}
});
});
_bindings = [];
$.each(_elements, function (index, element) {
var _el = element.element;
var _bindVal = "";
$.each(element.bindings, function (i, binding) {
if (_bindVal)
_bindVal = _bindVal + ", " + binding.binding + ": " + binding.value;
else
_bindVal = binding.binding + ": " + binding.value;
});
$(_el).attr("data-bind", _bindVal);
});
};
$.koApplyBindings = function (viewModel) {
$.koDataBind();
ko.applyBindings(viewModel);
};
})(jQuery);
這是已編碼的相關html:
<!-- Primary Email Field-->
<div class="email row">
<div class="label">
<label></label>
</div>
<div class="field">
<input class="email" type="text" placeholder="e.g. john.smith@example.com" autocomplete="email" />
<p class="error-message emailError"></p>
</div>
</div>
<!-- End Primary Email Field-->
通過在瀏覽器中檢查頁面,這是輸出html:
<div class="email row">
<div class="label">
<label data-bind="html: 'sdfd'"></label>
</div>
<div class="field">
<input class="email" type="text" placeholder="e.g. john.smith@example.com" autocomplete="email">
<p class="error-message emailError"></p>
</div>
</div>
您認為代碼有什么問題?
在淘汰賽中,HTML描述了整個應用程序。 與普通HTML描述頁面結構的方式相同,Knockout綁定描述了所有行為:可單擊的對象,顯示變量的對象等。這里使用的綁定綁定技術消除了所有的清晰度,而沒有任何改善。 還有一層附加的代碼用來附加綁定 ,這需要對HTML結構有深入的了解,才知道綁定在什么地方。 難以理解。 而且顯然不起作用。
我的建議是將標記放回HTML中,至少對有問題的元素放回HTML中,然后看是否可行。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.