如何在Word中将一个处理程序绑定到多个ContentControl（具有相同标题）？ 将Javascript API用于Office

Question

I'm developing with JavaScript API for Office, MS Word 2016, VisualStudio 2015. There are multiple Rich Text ContentContols with a same title in the document. I'm trying to bind these ContentControls to a handler so that I can get onBindingDataChanged notification.

Is there a way to bind the ContentControls to one handler with their own ID? or pass ContentControls' id as one parameter?

My current code is like:

function bindNamedItem() {

    Office.context.document.bindings.addFromNamedItemAsync("CCTitle", Office.BindingType.Text, { id: 'ccbind' }, function (result) {
        if (result.status == 'succeeded') {
            console.log('Added new binding with type: ' + result.value.type + ' and id: ' + result.value.id);
        }
        else
            console.log('Error: ' + result.error.message);
    });

}
 function addEventHandlerToBinding() {
    Office.select("bindings#ccbind").addHandlerAsync(Office.EventType.BindingDataChanged, onBindingDataChanged);
}

 var onBindingDataChanged = function (result) {
        console.log(result);     
    }

Since there are multiple contentcontrols in the document with title "CCTitle", addFromNamedItemAsync in function bindNamedItem will give error: Multiple objects with the same name were found.

What I'm trying to achieve is to get the ContentControls' id and content whenever the user make some change to any of them. Is there any idea to help? Thanks in advance.

Answer 1

As you've discovered, the naming of the content controls prevents you from binding based on the name. However, there is a workaround you can use to bind to every content control:

1. First retrieve Document .contentControls, which returns an array of all the content controls in the doc called a ContentControlCollection .
2. Each element in the array is a ContentControl object . Perform steps 3-6 in sequence for each ContentControl:
3. Check the name of the ContentControl with contentControl.title. If it matches the name you're looking for (CCTitle) then proceed with the following steps. Otherwise start back at step 3 for the next ContentControl.
4. Call the ContentControl's select() method with the default parameters to cause word to select it.
5. Once you've received confirmation in the callback that the ContentControl was selected, call Bindings.addFromSelectionAsync() with the Text bindingType.
6. Once you've received confirmation in the callback that the Binding was created successfully, call Binding.addHandlerAsync with the BindingDataChanged EventType . Use can use the same handler function for all of these bindings if you'd like.

One of the disadvantages of this workaround is that there are many chained asynchronous calls, so the performance may not be as fast as you'd like. As a result, I would recommend tying this operation to some user action and/or adding loading UI in the task pane in order to avoid confusing the user.

-Michael (PM for Office add-ins)