{"id":1407,"date":"2022-08-30T15:16:16","date_gmt":"2022-08-30T15:16:16","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/15\/knockoutjs-rangeerror-maximum-call-stack-size-exceeded-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:16:16","modified_gmt":"2022-08-30T15:16:16","slug":"knockoutjs-rangeerror-maximum-call-stack-size-exceeded-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/knockoutjs-rangeerror-maximum-call-stack-size-exceeded-collection-of-common-programming-errors\/","title":{"rendered":"KnockoutJS: RangeError: Maximum call stack size exceeded;-Collection of common programming errors"},"content":{"rendered":"

When registering a product, the user can customize the URL of it! As the user goes by typing the Tipo de produto<\/code>, Nome<\/code> or Link<\/code>, the website will show you how will the URL for this product<\/p>\n

<\/p>\n

\n

Full url: http:\/\/i.stack.imgur.com\/jZg7G.png<\/p>\n<\/blockquote>\n

Note that the field “Tipo de produto” also modifies the URL!!<\/strong><\/p>\n

For this, I created a helper in KnockoutJS<\/p>\n

Code<\/h2>\n

KnockoutJS<\/strong><\/p>\n

ko.bindingHandlers.url =\n    update: (element, valueAccessor, allBindingsAccessor, viewModel) ->\n        link = ko.utils.unwrapObservable(valueAccessor())\n        if link\n            link = link.toLowerCase().trim().replaceAll(\" \", \"-\")\n            link = encodeURI(link)\n        else\n            link = \"\"\n        valueAccessor()(link)\n        $(element).nextAll(\".link-exibicao\").text(link).effect(\"highlight\", { color: \"#FDBB30\" }, 800 )\n<\/code><\/pre>\n
The only purpose of this helper is to generate a valid URL and display it in the span .link-exibicao<\/code><\/p>\n
ViewModel<\/strong><\/p>\n
public class ProdutoViewModel\n{\n    [AdditionalMetadata(\"data-bind\", \"event: { change: function(data) { Link(data.Nome());  }}\")]\n    public string Nome { get; set; }\n\n    [DataType(DataType.Url)]\n    [AdditionalMetadata(\"Prefixo\", \"Produto\/\")]\n    public string Link { get; set; }\n\n    [Display(Name = \"Descri\u00e7\u00e3o\")]\n    [DataType(DataType.MultilineText)]\n    public string Descricao { get; set; }\n\n    public int? Ordem { get; set; }\n}\n<\/code><\/pre>\n
AdditionalMetadata<\/code> will add an attribute with that name and value. For example, the property Name<\/code> will generate the HTML:<\/p>\n
\n<\/code><\/pre>\n
Url.cshtml<\/strong><\/p>\n
The next step would be to add the markup data-bind=\"url: Link\"<\/code> in all fields of type URL:<\/p>\n
@model string\n@{\n\n    var values = ViewData.ModelMetadata.AdditionalValues;\n    object objDatabind;\n    string data_bind = \"\";\n    if (values.TryGetValue(\"data-bind\", out objDatabind))\n    {\n        data_bind = objDatabind.ToString();\n    }\n\n    var nomeCampo = Html.IdForModel();\n\n    var objPrefixo = values[\"Prefixo\"];\n    string prefixo = objPrefixo.ToString();\n    string separador = \"\/\";\n    if (!string.IsNullOrWhiteSpace(prefixo))\n    {\n        if (prefixo.EndsWith(\"\/\") || prefixo.EndsWith(\"#\"))\n        {\n            separador = prefixo[prefixo.Length - 1].ToString();\n            prefixo = prefixo.Substring(0, prefixo.Length - 1);\n        }   \n    }\n}\n\n@Html.TextBoxFor(p => Model, new { data_bind = \"value: \" + nomeCampo + \", url: \" + nomeCampo + (string.IsNullOrWhiteSpace(data_bind) ? \"\" : \", \" + data_bind) })\n@Request.Url.Host\/@prefixo@separador\n<\/code><\/pre>\n
ProdutoViewModel.cshtml<\/strong><\/p>\n
Finally, and most simple step would be to build the form =):<\/p>\n
\n    Tipo de produto\n\n\n    \n\n\n\n    @Html.LabelFor(p => p.Nome)\n\n\n    @Html.EditorFor(p => p.Nome)\n    @Html.ValidationMessageFor(p => p.Nome)\n\n\n\n    @Html.LabelFor(p => p.Link)\n\n\n    @Html.EditorFor(p => p.Link)\n    @Html.ValidationMessageFor(p => p.Link)\n\n\n\n    @Html.LabelFor(p => p.Descricao)\n\n\n    @Html.EditorFor(p => p.Descricao)\n    @Html.ValidationMessageFor(p => p.Descricao)\n\n\n\n    @Html.LabelFor(p => p.Ordem)\n\n\n    @Html.EditorFor(p => p.Ordem)\n    @Html.ValidationMessageFor(p => p.Ordem)\n\n<\/code><\/pre>\n
Problem<\/h2>\n
Whenever typed simple words like: “my product name” everything works perfectly!
\nBut words like meu prod\u00fato c\u00f4m a\u00e7\u00eanto<\/code> the error below is displayed!<\/p>\n
Uncaught Error: Unable to parse bindings.\nMessage: RangeError: Maximum call stack size exceeded;\nBindings value: value: Link, url: Link\n<\/code><\/pre>\n
    \n
  1. \n
    Your bindingHandler is causing recursive updates, as you are accessing the value:<\/p>\n
    link = ko.utils.unwrapObservable(valueAccessor())<\/code><\/p>\n
    and later setting it:<\/p>\n
    valueAccessor()(link)<\/code><\/p>\n
    If link<\/code> ends up being identical to its current value, then the chain would stop (observables don’t notify on identical (===) values).<\/p>\n
    When you pass: meu prod\u00fato c\u00f4m a\u00e7\u00eanto<\/code><\/p>\n
    It becomes: meu-prod%C3%BAto%20c%C3%B4m%20a%C3%A7%C3%AAnto<\/code><\/p>\n
    When setting the observable it re-triggers the same binding. So, it calls encodeURI<\/code> again and now it is double-encoded like:<\/p>\n
    meu-prod%25C3%25BAto%2520c%25C3%25B4m%2520a%25C3%25A7%25C3%25AAnto<\/code><\/p>\n
    The observable is set again and since this value is new it triggers it again (and again and again) until you get the call stack error.<\/p>\n
    Some options to handle this would be to not write back to the observable and just use the binding to encode the URL.<\/p>\n
    Otherwise a good choice would be to use a writeable computed observable<\/code> to intercept writes to the value and manipulate it in the model.<\/p>\n<\/li>\n<\/ol>\n
    Originally posted 2013-11-15 09:09:49. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    When registering a product, the user can customize the URL of it! As the user goes by typing the Tipo de produto, Nome or Link, the website will show you how will the URL for this product Full url: http:\/\/i.stack.imgur.com\/jZg7G.png Note that the field “Tipo de produto” also modifies the URL!! For this, I created […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1407","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1407"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1407\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}