覆盖困难的视图模型如何实现?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (28)

我试图用JS替换输入字段中的一些文本,但视图模型每次都会覆盖我的命令。这是我开始的HTML:

<td class="new-variants-table__cell" define="{ editVariantPrice: new Shopify.EditVariantPrice(this) }" context="editVariantPrice" style="height: auto;">
    <input type="hidden" name="product[variants][][price]" id="product_variants__price" value="25.00" bind="price" data-dirty-trigger="true">
    <input class="mock-edit-on-hover tr js-no-dirty js-variant-price variant-table-input--numeric" bind-event-focus="onFocus(this)" bind-event-blur="onBlur(this)" bind-event-input="onInput(this)">
</td>

我运行这个JS:

jQuery('#product_variants__price').siblings().removeAttr('bind-event-focus');
jQuery('#product_variants__price').siblings().removeAttr('bind-event-input');
jQuery('#product_variants__price').siblings().removeAttr('bind-event-blur');
jQuery('#product_variants__price').siblings().focus()
jQuery('#product_variants__price').siblings().val("34.00");
jQuery('#product_variants__price').val("34.00");

而我留下了以下HTML:

<td class="new-variants-table__cell" define="{ editVariantPrice: new Shopify.EditVariantPrice(this) }" context="editVariantPrice" style="height: auto;">
    <input type="hidden" name="product[variants][][price]" id="product_variants__price" value="34.00" bind="price" data-dirty-trigger="true">
    <input class="mock-edit-on-hover tr js-no-dirty js-variant-price variant-table-input--numeric">
</td>

问题在于,每次点击输入字段时,该值都会恢复为加载页面时的值。

我也尝试在父td中运行命令以及我的值更改,以模拟变体的编辑并防止默认值失败:

jQuery('#product_variants__price').siblings().bind('input', function (e) {
    e.preventDefault();
    return false;
});
jQuery('#product_variants__price').siblings().bind('focus', function (e) {
    e.preventDefault();
    return false;
});
jQuery('#product_variants__price').siblings().focus()
jQuery('#product_variants__price').siblings().val("£34.00");
jQuery('#product_variants__price').val("£34.00");
jQuery('#product_variants__price').siblings().keydown()

父td函数:

new Shopify.EditVariantPrice(jQuery('#product_variants__price').parent())

那么如何才能在输入中成功编辑此值并更新Shopify视图模型?

你可以去这里试试这个:

https://jebus333.myshopify.com/admin/products/2521183043 登录jebus333@mailinator.com密码shop1

我试图找到页面上的视图模型,但没有成功。另外,在编辑输入字段中的值时没有网络调用,导致我相信这些值将从页面某处拉回。

提问于
用户回答回答于

尝试这个:

var old = Shopify.EditVariantPrice.prototype.onFocus;
Shopify.EditVariantPrice.prototype.onFocus = function(t) { 
  this.price = '50.00'; // Use the price you want here
  old.call(this, t); 
};
jQuery('#product_variants__price').siblings().triggerHandler("focus");
jQuery('#product_variants__price').siblings().triggerHandler("blur");

如果它对你有用,以下可能就足够了:

Shopify.EditVariantPrice.prototype.onFocus = function(t) { 
  this.price = '50.00'; // Use the price you want here
};
用户回答回答于

首先你需要一个sendkeys插件。事实上,这意味着你需要包含这个这个 JS库(你可以将它们复制粘贴到控制台中进行测试)。如果你不想使用第一个库(我个人觉得它对于这么小的东西很大),你只能从中提取关键的东西并且只使用它们。

下一步是创建一个功能,它将像一个真正的用户那样工作:

function input(field, desiredValue) {
  // get the currency symbol while value is still pristine
  var currency = field.val()[0];

  // move focus to the input
  field.click().focus();

  // remove all symbols from the input. I took 10, but of course you can use value.length instead
  for (var i = 0; i < 10; i++) field.sendkeys("{backspace}");

  // send the currency key
  field.sendkeys(currency);

  // send the desired value symbol-by-symbol
  for (var i = 0; i < desiredValue.length; i++) field.sendkeys(desiredValue[i]);
}

然后你可以简单地用你想分配的值来调用它:

input($("#product_variants__price").next(), "123.00");

由于缺乏时间,我没有真正设法弄虚化事件; 这就是为什么我被迫读取货币并.00作为字符串传递的原因。无论如何,你已经有了一条可行的解决方案。

扫码关注云+社区

领取腾讯云代金券