UPDATE : คุณสามารถเข้าถึง viewmodels ได้โดยตรง หากคุณต้องการทริกเกอร์โค้ดให้ทำงานหลังจากการเรนเดอร์ให้ใช้ MutationObserver ฉันจะโพสต์รหัสของฉันทันทีที่ฉันมีตัวอย่างการทำงานที่ดี
คำถามเดิม: เรามีคำสั่งซื้อทางโทรศัพท์มากมาย ฉันกำลังทำงานกับโมดูลที่เติมข้อมูลอัตโนมัติในผู้ดูแลระบบ -> ลูกค้า -> สร้างใหม่จากโซลูชัน CRM ของเราโดยใช้การโทร webapi / jsonp ด้วยวิธีนี้ข้อมูลในวีโอไอพีไม่ได้สร้างข้อมูลซ้ำซ้อนที่เราได้จัดเก็บไว้ใน 'ฐานข้อมูลหลัก' ของเราแล้ว
งานหนึ่งที่ฉันยังต้องทำคือเพิ่มที่อยู่ของลูกค้า สิ่งนี้ดูเรียบง่ายในตอนแรกจนกระทั่งฉันตระหนักว่า knockoutjs + magentojs แสดงทุกสิ่งในแบบฟอร์มลูกค้าได้บล็อกฉันจากการจับองค์ประกอบเทมเพลต ฉันมีเวลาพยายามเก็บชุดเขตข้อมูล (องค์ประกอบการป้อนข้อมูล) หลังจากหลังจากลบที่อยู่ทั้งหมดโดยใช้โปรแกรมและสร้างใหม่
หากคุณสงสัยว่าทำไมฉันถึงทำเช่นนั้นส่วนหนึ่งของรหัสของฉันก็ปรากฏขึ้นและไป "เฮ้คนนี้มีอยู่แล้วคุณต้องการใช้พวกเขาหรือไม่?" และจะลบสิ่งที่คุณพิมพ์ไปแล้วและแทนที่ด้วยข้อมูลที่ถูกต้อง จากนั้นศูนย์บริการตรวจสอบความถูกต้องมัน yadda yadda
ฉันจะแบ่งปันรหัสที่ฉันมี แต่มันไม่ทำงานค่อนข้างถูกต้อง FYI สิ่งนี้จะขยายบทคัดย่อเพื่อให้ทันเหตุการณ์ 'onUpdate' อย่ากีดกันฉันเมื่อพยายามเข้าถึงคอลเล็กชันด้านในของรายการคอลเลกชัน ฉันไม่สามารถหาวิธีที่ดีกว่าในการติดตามเหตุการณ์ onUpdate และยังคงดูที่ทุกฟิลด์
ฉันยังเข้าใจอย่างสมบูรณ์ว่ามีอะไรผิดปกติฉันแค่ไม่รู้ว่าจะทำอย่างไร มีอะไรผิดปกติฉันถือว่าองค์ประกอบที่สร้างโดยการเปิดใช้งาน. () โทรจะสามารถใช้ได้ทันทีในต่อไปนี้
document.getElementsByClassName ( 'admin__fieldset')
นี่เป็นเพียงตรรกะที่ผิด เป็นการดีที่ฉันชอบที่จะสามารถดึงเนื้อหา fieldset โดยไม่ต้องหันไปใช้เล่ห์เหลี่ยม UI นี้แล้วเมื่อฉันมีทุกอย่างตั้งค่าเพียงแค่แสดงมันออกมา
ฉันไม่ต้องการใช้ jQuery hacks เพื่อดูการปรับปรุง dom
// jsonService variable is available here because it is in the php template render. see
// Stti/Customer/view/adminhtml/templates/javascriptinject.phtml
define(['ko','jquery','underscore','originalAbstract','uiElement', 'uiCollection'], function(ko, $, _, Abstract, Element, Collection) {
"use strict";
var theArray = {
formFields: [],
getKnockout: (function (ko) {
return ko;
})(ko),
addressButton: null,
populateFormFields: function () {
this.formFields = [];
// Populate the addressButton thinger
this.addressButton = this.getNewAddressButton();
var cb = (function(formFields){
return function (data) {
cr(data, formFields);
}
})(this.formFields);
var cr = function (data, formFields) {
var elems = data.elems();
for (var i = elems.length - 1; i >= 0; i--) {
if (elems[i].hasOwnProperty('uid')) {
formFields.push(elems[i]);
}
}
};
var fieldsets = document.getElementsByClassName('admin__fieldset');
for (var i = fieldsets.length - 1; i >= 0; i--) {
var data = this.getKnockout.dataFor(fieldsets[i]);
cb(data);
}
},
cleanupAddresses: function () {
// Remove all addresses
var fieldsets = document.getElementsByClassName('admin__fieldset');
for (var i = fieldsets.length - 1; i >= 0; i--) {
var data = this.getKnockout.dataFor(fieldsets[i]);
if (data.dataScope.indexOf('data.address') !== -1 && data.childType === 'group') {
data.destroy();
}
}
},
getNewAddressButton: (function () {
var retVal = null;
var customerItem = null;
// Make sure the template is loaded
var fieldsets = document.getElementsByClassName('admin__page-nav-item');
for (var i = fieldsets.length - 1; i >= 0; i--) {
var data = this.getKnockout.dataFor(fieldsets[i]);
if (data.dataScope === 'data.address') {
data.activate();
} else {
customerItem = data;
}
}
// AT THIS POINT, I REALLY WANT KNOCKOUT TO RENDER.
fieldsets = document.getElementsByClassName('admin__fieldset');
for (var i = fieldsets.length - 1; i >= 0; i--) {
var data = this.getKnockout.dataFor(fieldsets[i]);
var elems = data.elems();
if (elems.length === 1 && data.dataScope === 'data.address' && data.index === 'address') {
retVal = elems[0];
}
}
// Return the user to the Account Information section
if (customerItem !== null) {
//customerItem.activate();
}
return retVal;
}),
addNewAddress: function () {
var retVal = null;
// Use the addressButton to add a child address
if (this.addressButton) {
retVal = this.addressButton.addChild();
}
this.populateFormFields();
return retVal;
},
onUpdate: function (newValue) {
if (newValue) {
this.clearAllFields();
switch (this.index) {
case "email":
this.handleEmailBlur(newValue);
break;
case "constit_id":
this.handleConstitBlur(newValue);
break;
}
}
},
handleEmailBlur: function (newValue) {
// Don't look up anything if the box was cleared out
if (newValue != null || newValue != '') {
this.clearAllFields();
this.makeJsonReq("GetIndividualByEmail?emailaddress=" + newValue + '&callback=?');
}
},
handleConstitBlur: function (newValue) {
// Don't look up anything if the box was cleared out
if (newValue != null || newValue != '') {
this.clearAllFields();
this.makeJsonReq("GetIndividualByConstit?constit=" + newValue + '&callback=?');
}
},
jQueryByIndex: function (index) {
function findUIDbyIndex(element) {
return element.index === index;
}
return $('#' + this.formFields.find(findUIDbyIndex).uid);
},
makeJsonReq: function (callString) {
var msg = null;
$.getJSON(jsonService + callString, (function (localData) {
return function (data) {
doWork(data, localData);
}
})(this)
).done(function () {
console.log("Json Request Successful");
}).fail(function () {
console.log("Json Request Fail");
}).always(function () {
if (msg != "") {
alert(msg);
}
});
function doWork(individual, localData) {
// create as many addresses as the individual has
if (individual != null) {
if (individual.NKIUserId != null) {
if (individual.NKIUserId != "") {
msg = "WARNING! Netforum reports this user has been added to magento with ID " + individual.NKIUserId + ". LOOKUP THE CUSTOMER FIRST AND CONFIRM YOU WANT TO ADD A NEW CUSTOMER!";
}
//window.location = "/admin";
}
if (individual.ConstitID != null) {
msg = localData.populateFields(individual, localData);
}
else {
msg = "Individual could not be found in NetForum. Verify that this IS a new customer.";
}
}
else {
msg = "Customer's email was not found in netforum. Be sure to use the correct constituent ID if this is an existing customer. A new Netforum customer will be created if it is blank or incorrect.";
// prepFormNoUser("constit");
}
}
},
populateFields: function (individual, localData) {
// This function is used to get jquerySelector by index
var getField = localData.jQueryByIndex;
if (localData.jQueryByIndex('email')) {
localData.jQueryByIndex('email').val = individual.PrimaryEmailAddress;
}
var addresses = null;
var mageAddresses = [];
if (individual.Addresses) {
addresses = individual.Addresses;
// Populate the form with the addresses
for (var i = 0; i < addresses.length; i++) {
mageAddresses.push(localData.addNewAddress());
}
debugger;
var primaryAddress = null;
for (var i=0; i < addresses.length; i++) {
addresses.each(function (e) {
try {
if (e.IsPrimary) {
primaryAddress = e;
}
} catch (err) {
// todo: handle errors
}
// Populate the billing address if we are on the order screen
if (primaryAddress.Id) {
if ($('order-billing_address_cxa_key')) {
$('order-billing_address_cxa_key').value = primaryAddress.Id;
$('order-billing_address_cxa_key').disable();
}
}
if (primaryAddress.Line1) {
if ($('order-billing_address_street0')) {
$('order-billing_address_street0').value = primaryAddress.Line1;
}
}
if (primaryAddress.City) {
if ($('order-billing_address_city')) {
$('order-billing_address_city').value = primaryAddress.City;
}
}
if (primaryAddress.Zip) {
if ($('order-billing_address_postcode')) {
$('order-billing_address_postcode').value = primaryAddress.Zip;
}
}
if (individual.PrimaryPhoneNumber) {
if ($('order-billing_address_telephone')) {
$('order-billing_address_telephone').value = individual.PrimaryPhoneNumber;
}
}
});
}
}
if (individual.MemberType != null) {
if ($('group_id')) {
var options = $$('select#group_id option');
if (individual.MemberType > 0) {
options[3].selected = true;
$('signup_method').value = "ADMIN-NEWORDER-EXISTING-MEMBER";
}
else {
options[0].selected = true;
$('signup_method').value = "ADMIN-NEWORDER-EXISTING-NONMEMBER";
}
$('signup_method').disable();
}
if ($('_accountconstit_id')) {
var options = $$('select#_accountgroup_id option');
if (individual.MemberType > 0) {
options[3].selected = true;
$('_accountsignup_method').value = "ADMIN-NEWCUSTOMER-EXISTING-MEMBER";
}
else {
options[0].selected = true;
$('_accountsignup_method').value = "ADMIN-NEWCUSTOMER-EXISTING-NONMEMBER";
}
$('_accountsignup_method').disable();
}
}
if ($('_accountcst_key')) {
$('_accountcst_key').value = individual.Id;
$('_accountcst_key').disable();
}
if ($('cst_key')) {
$('cst_key').value = individual.Id;
$('cst_key').disable();
}
if (individual.FirstName) {
if ($('_accountfirstname')) {
$('_accountfirstname').value = individual.FirstName;
}
if ($('order-billing_address_firstname')) {
$('order-billing_address_firstname').value = individual.FirstName;
}
}
if (individual.LastName) {
if ($('_accountlastname')) {
$('_accountlastname').value = individual.LastName;
}
if ($('order-billing_address_lastname')) {
$('order-billing_address_lastname').value = individual.LastName;
}
}
if (individual.MiddleName) {
if ($('_accountmiddlename')) {
$('_accountmiddlename').value = individual.MiddleName;
}
if ($('order-billing_address_middlename')) {
$('order-billing_address_middlename').value = individual.MiddleName;
}
}
if (individual.DateOfBirth) {
var dob = new Date(parseInt(individual.DateOfBirth.substr(6)));
var fDob = dob.toString('MM-dd-yyyy');
if ($('_accountdob')) {
$('_accountdob').value = fDob;
}
}
return msg;
},
clearAllFields: function () {
var inputs = $(':input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = '';
}
this.cleanupAddresses();
this.populateFormFields();
}
};
// Use jQuery to figure out what page we are on. the body will contain the class matched by name in the
// view/adminhtml/layout folder
if ($('body.customer-index-edit').length > 0) {
return Abstract.extend(theArray);
}
});
ดูstackoverflow.com/questions/26243756/…
—
KAndy