Javascript 覆盖困难视图模型

我试图用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>

我只剩下以下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函数：

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

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

您可以通过以下方式亲自尝试：

登录jebus333@mailinator.com 密码商店1

---

编辑：我试图在页面上找到视图模型，但没有成功。另外，在编辑输入字段中的值时，没有网络调用，这让我相信这些值是从页面上的某个地方拉回来的。

嗯，有一种肮脏的解决方案

首先，你需要一个插件。事实上，这意味着您需要包括和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]);
}

由于时间不够，我并没有真的设法伪造模糊事件；这就是我被迫读取货币并将

.00

作为字符串传递的原因。无论如何，你已经有了一条路要走，还有一个非常有效的解决方案。

试试这个：

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
};

---

看起来您正在尝试在Shopify的管理面板中自动编辑产品的不同价格

我建议使用Shopify的批量产品编辑器，让您可以在一个屏幕上设置所有变体的价格，而不是玩弄Shopify管理页面的DOM。我觉得在批量产品编辑器页面上使用JavaScript设置变体价格会更好

单击下面屏幕截图中所示的“编辑产品”按钮将打开批量产品编辑器

---

另外，请检查基于浏览器的宏录制插件（如）是否对您有所帮助（您也可以在iMacro中使用JS编写宏）。

哇，您有时间键入所有这些

jQuery（…）

s吗？为什么不

$（…）

？他们是一样的！我不记得我为什么那样做了。这可能是因为我在另一个网站上工作，$引用了Chrome命令行API，但我在Spotify的网站上看到它确实引用了jQuery。

bind

在JQ 1.7中几乎被弃用。@forgetso使用“stopImmediatePropagation（）”和“stopPropagation（）”和check@yugi你能详细介绍一下这个方法吗？我两种方法都试过了，但都不走运。谢谢。我会将此方法添加到我的代码中，并报告是否有效。如果是的话，我会奖励赏金。@forgetso对你有用吗？你遇到过问题吗？它确实有效，但在我所做的事情中它不会起作用。你能想到不用sendkeys也能达到同样的效果吗？对于上下文，我尝试搜索用户定义的字符串并替换该字符串的出现。使用sendkeys，我需要将搜索字符串分解为各个部分，然后发送每个部分。我宁愿做一个简单的

字符串。替换
…如果你使用这个系统，你将被迫使用这个系统的规则。进行替换对您没有帮助，因为模型不会更新。发送密钥是适用于任何系统的方式，因为这正是用户通常所做的。所有内容都已包装在函数中，因此您不需要一次又一次地拆分它，这就是浏览器将要做的。再说一次，只要你不能改变模型，模仿用户的动作是处理所有我不同意这个方法的事情的唯一方法。视图模型必须位于页面的某个位置，这意味着它可以通过字符串替换进行编辑。这是正确的吗？感谢您解释发送密钥库处理整个字符串，这样就不需要对其进行分解。我没有意识到这一点。谢谢，对于上下文，我正在使用Chrome扩展，我正在搜索一个字符串，并试图在选项卡的上下文中替换它。编写访问批量产品编辑器的附加步骤超出范围。谢谢。这并没有达到我在使用
string.replace
后的效果，但它确实达到了预期的效果，而不需要额外的库。
input($("#product_variants__price").next(), "123.00");

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
};